现代 CSS

animation

CSS3 Full Background Slider

CSS3 Full Background Slider
今天在365psd上看到一个psd效果,很有意思,想着能不能转成web页面,这问题想得太SB了,然后接着想,转成带有css3的动画效果。那转成什么呢?思来想去做了一个全屏背景图的幻灯片效果。虽然是一个简单的demo,但里面集合了CSS3众多属性,从伪结构选择器,到圆角,阴影以及动画等。

纯css3滚动效果

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

css3加载动画2

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

css3进度条动画

css3进度条动画
这个进度条是应用css3的渐变背景做出来的,然后应用background-size属性设置大小,然后以这个size为单位平铺。分析的时候你可以先禁用animation这个动画,然后可以用firebug设置background-repeat:no-repeat;来查看它一个单元的渐变背景。得到非动画的原理,我们再来研究动画部分,背景图片的运动,当然是用background-position了。

css3加载动画1

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

css3背景运动

css3背景运动
两个css3背景运动实例,一个是图片,一个是渐变。关键点就在于定义背景的位置,使之可以循环往复,注意衔接地方不要出现中断啊。这个对不支持的浏览器降级也可以很优雅,第一个就是背景的平铺,至于第二个也可以设置一个背景,或者直接设置一个border-top什么的都可以。

页面

返回顶部