|
[tr][td]
图片：114646lrm1cc44ochmzd1c.jpg  在线演示及下载 在这些DEMO中，将演示如何使用CSS3的step()来处理动画效果。 运动的小车： .contain-car { animation: drive 4s steps(4, end) infinite; } .contain-car-2 { animation: drive 4s steps(4, start) infinite; } @keyframes drive { to { transform: translateX(640px); } } 时钟效果： .second { animation: tick-tock 60s steps(60, end) infinite; } @keyframes tick-tock { to { transform: rotate(360deg); } } 脚爪： .cover { animation: walk 7s steps(7, end) infinite; } @keyframes walk { to { transform: translateX(675px); } 进度： .circle { animation: fill 5s steps(5, start) forwards; } @keyframes fill { to { opacity: 1; } } 关键词：DEMO、CSS3、CSS教程、html5 [*] [/td][/tr] |
|
