在css3出现以前,想要在网页上实现动画特效几乎都是通过JavaScript或JavaScript的相关插件来实现,但css3出现后,利用css3的animation属性就可以实现很多我们想要的动画特效,而不必再依赖JavaScript。
“字节跳动”是一个在ppt幻灯片中很常用的特效,它可以很好的把我们的视觉注意力引到字节跳动的地方。今天就来跟大家一起分享:通过css3的animation属性来实现“字节跳动特效”。
我们先来看看效果图:
为了大家能更好的理解动画特效,先来介绍下animation的用法和一些相关属性
animation: letter 1s cubic-bezier(0.1,0.5,0.2,1) infinite alternate;
letter:动画名称,(可以简单理解为一组css样式的名称);
1s:表示动画完成一次所花的时间;
cubic-bezier(0.1,0.5,0.2,1):动画运动曲线,括号里的四个数字表示两个(x,y)坐标点,前两个数字是第一个坐标点,后两个数字是第二个坐标点;
infinite:表示无限循环,或者改成数字,表示想要循环运动的次数;
alternate:表示动画在奇数次播放时为正向播放,为偶数次播放时为反向播放,默认为始终正向播放;
如果只是如上的设置,结果是所有文字都是一起动的,因此还有个属性animation-delay:动画开始前端延迟时间,因为字节跳动是一个一个字的动,因此还需要给每个字都设置延迟时间。
属性介绍完了,下面上代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> body{ background-color: #0099ff; } div{ text-align: center; margin: 200px auto; } span{ position: relative; text-align: center; color: white; font-size: 42px; animation: letter 1s cubic-bezier(0.1,0.5,0.2,1) infinite alternate; top: 0px; } span:nth-child(1){ animation-delay: 0s; } span:nth-child(2){ animation-delay: 0.1s; } span:nth-child(3){ animation-delay: 0.2s; } span:nth-child(4){ animation-delay: 0.3s; } span:nth-child(5){ animation-delay: 0.4s; } span:nth-child(6){ animation-delay: 0.5s; } span:nth-child(7){ animation-delay: 0.6s; } span:nth-child(8){ animation-delay: 0.7s; } span:nth-child(9){ animation-delay: 0.8s; } span:nth-child(10){ animation-delay: 0.9s; } /* *letter对应animation中的letter *from表示起始状态 *top表示结束状态 */ @keyframes letter{ from{ top: 0px; } to{ top: 50px; } } </style> </head> <body> <div> <span>欢</span> <span>迎</span> <span>来</span> <span>到</span> <span>心</span> <span>月</span> <span>I</span> <span>T</span> <span>博</span> <span>客</span> </div> </body> </html>
animation-delay:延迟时间越短运动的越快,在实际使用中需自己把握。