CSS3动画小demo

利用css3的动画属性可以实现很多有趣的动画效果。

animation 循环动画

animation-iteration-count 属性设置为 infinite 可以使动画循环播放。

loading效果

demo1
定义一个垂直伸缩的 keyframes ,然后绑定在每个条子上,设置不同的animation-delay,就可以使每个条子运动起来,整体成波浪线运动。当网页中有需要等待的请求时,我们就可以插入这段动画,优化用户体验。

摆钟效果

demo2
这个 demo 用到了 transform-origin 属性,将钟表和秒针的旋转中心设置在不同的地方,利用相对定位和绝对相对,使秒钟旋转中心根据钟表的位置定位,从而使钟表做钟摆运动的同时,秒钟做圆周运动。再将 animation-direction 属性值设为 alternate ,使钟表来回运动。

transition 过渡动画

transition 属性和 :hover 联用实现酷炫的动态效果。

朦层效果

demo3
鼠标移到图片上,边框旋转180度,显示朦层和字体,鼠标移出还原。朦层和字体在同一个 div 下,该 div 和边框 div 都设置 position:absolute ,最外层 div 设置 position:relative 。该效果可以用于图片信息的展示。

折角效果

demo4
鼠标移到图片上,显示折角,点击折角图片消失显示按钮,点击小叉叉图片又动态地恢复。利用 before 伪类创建折角,初始 border-width: 0;,当鼠标移入时设置 border-right-width: 80px;border-bottom-width: 80px; ,为了使折角两边颜色不一样设置 border-color: rgba(0, 0, 0, 0.2) #fff;。该效果可用于图片的翻页。