动画的运用比较重要。接下来我希望针对我自己学习遇到的问题,再总结一下这个属性的使用方法。
创建一个动画:
@keyframes 动画名 {样式}
引用自己创建的动画:
animation:动画名 时长(执行多长时间) 效果 开始时间(多久之后开始);
其中 效果 开始时间是可以省略的。
举个栗子:div获得鼠标焦点时会改变宽度
1 <div class="dh1"></div> 2 3 <style> 4 div{ 5 border: 1px solid black; 6 width: 100px; 7 height: 100px; 8 } 9 /*创建一个动画myDongHua1 内容是在不同时间段改变div的宽度*/ 10 @keyframes myDongHua1 { 11 0%{width: 300px;} 12 50%{width: 200px;} 13 100%{width: 600px;} 14 } 15 /*调用动画效果 animation: 动画名 执行时间长度;*/ 16 .dh1:hover{ 17 animation:myDongHua1 1s; 18 } 19 </style>
再举个栗子:当div获得鼠标焦点时 颜色会从yellow变成blue
1 <div class="dh2"></div> 2 3 <style> 4 div{ 5 border: 1px solid black; 6 width: 100px; 7 height: 100px; 8 } 9 /*创建一个动画myDongHua2 内容是分阶段改变div颜色*/ 10 @keyframes myDongHua2{ 11 from{background:yellow;} 12 to{background:blue;} 13 } 14 /*调用动画效果 animation: 动画名 执行时间长度;*/ 15 .dh2:hover{ 16 animation:myDongHua2 3s; 17 } 18 </style>
再再举个栗子:当div获得鼠标焦点会出发 CD的旋转动画效果
1 <div class="CDtum"> 2 <img src="img/cd.png" alt=""/> <!--此处引入一个CD的圆形图片--> 3 </div> 4 5 <style> 6 7 /*cd旋转实例*/ 8 .CDtum{ 9 width: 200px; 10 height: 200px; 11 } 12 .CDtum img{ 13 width: 200px; 14 height: 200px; 15 border-radius: 100%; 16 } 17 /*设置动画从0度旋转到360度*/ 18 @keyframes CDtum{ 19 from{transform:rotate(0deg)} 20 to{transform:rotate(360deg)} 21 } 22 /*调用动画 3秒内完成 linear:匀速 3表示只进行三次动画 可以用infinite 来无限执行*/ 23 .CDtum img:hover{ 24 animation:CDtum 3s linear 3 ; 25 } 26 </style>