纯css3滚动效果

作者：结一日期：2012-09-01 点击：9507

看到该实例标题的时候，表示心情十分激动然后再加上一点忑忑，因为以前看过类似的，但是都比较有缺憾，不那么完美。可是这个媲美从前所有的纯css3打造的滚动效果，可以堪称完美了（除了没有导航控制）。只因制作巧妙精美，所以我只表示欣赏而不好加以评论，感兴趣的话大家还是自己手动研究下为好。

阅读全文

css3鼠标滑过动画

作者：结一日期：2012-09-01 点击：4454

本实例共有五个鼠标滑过的动画效果，但其实原理都是差不多。第一个是多加了一个空白的标签，来显示那个遮罩的三角形；第二，三，四都是对却是用border来生成的遮罩，至于第五个效果就比较复杂，不过原理都是一样的，实际应用也不需要那么复杂。所以只需把前面四个简单的学会了，第五个就当做欣赏吧，扩大自己的视野，以后举一反三的机会多的是。说到底，transition的动画变换来变换去，都是那么几个属性，关键在于对基本属性的把握及对动画效果的设计，多看点效果积累点，以后也可以做到得心应手。

阅读全文

纯css3手风琴效果2

作者：结一日期：2012-08-29 点击：3637

这三个案例实际上就是用了两种技术，一个是radio来控制，一个是checkbox来控制，用radio表示只有一个可以展开（radio的只有一个是选中状态），而checkbox则表示可以同时展开多个（checkbox可以多个选中）。其实道理都是一样的，对radio或者checkbox的选中状态进行判断，然后决定其下面的兄弟元素的高度。

阅读全文

纯css3手风琴效果1

作者：结一日期：2012-08-29 点击：781

本实例通过对radio按钮的状态判断来实现折叠效果。主要应用的是兄弟元素选择器~，注意这个兄弟元素选择器只选择后面的兄弟元素，对于同级的前面的兄弟元素css3还没有响应的选择器。然后综合应用:before和transition来实现前面图标的切换及高度的伸展动画。这个高度的伸展变化必须设置一个具体的值，如为auto则没有transition动画效果，只是切换而已。

阅读全文

css3加载动画2

作者：结一日期：2012-08-27 点击：1529

其实分析每个css3的案例动画，首先做的应该是先把动画停下来，了解下初始是怎么样的。如这个我们一开始看到这么绚的动画加载效果，一般都认为比较难，但是先把animation这个属性通过firebug禁用后，发现原来原理并不是很复杂，只是运用了border，border-radius和box-shadow，然后给就是rotate的animation。第二个和第一个原理一样，只是设置的border-color四个值不一样罢了。而第三个则是使用不同的延迟时间引发scale的动画。至于暂停按钮则是通过js来添加stop这个class，stop则设置了animation-play-state:paused;

阅读全文

css3加载动画1

作者：结一日期：2012-08-23 点击：868

这是第一个纯css3的loading动画。这个demo的技巧在于先通过:before生成一个外围，这样就形成了两个圆圈，还是以前虚线框里面说的通过上下左右定位为-20px来扩大的外围的圆圈，这些都是静止的。正在运动的其实是一个空span标签设计出来的一个三角形，这里设置的颜色与背景色一直，所以看不出来，其实你可以设置为红色方便观察，就明白了。最后就是animation的运用了。

阅读全文