开发工具与关键技术:DW与CSS3
作者:茅凯翔
撰写时间:2019年1月19日星期六
如果你想用CSS3来创建动画,可以学习一下@keyframes规则。
@keyframes可用于创建动画效果,@keyframes可以规定某项CSS样式,就能达到从当前样式逐渐改变为新样式,接下来我们来看看。
我们先用百分比来规定一下动画时间:
一定要从0%开始,因为0%是开始,100%是结束。Background-size是让图片适应我给高宽度,如果你是颜色就不用设置这个属性。
然后我们再给div设置样式,样式如下:
最后我们再设置动画属性,如下图:
1.animation-name为指定的动画名称,带有红线就是我们自己设置的动画名称。
2.animation-duration为动画持续时间。
3.animation-timing-function为动画的变化速度。
4.animation-delay为动画延迟多久才开始。
5.animation-iteration-count为动画的循环次数。
最后我们的效果图:
我也不晓得怎么弄视频上来,你们可以试一下,谢谢!