通过所学的HTML进行制作风车旋转案例！
演示：
首先看下效果图
代码：
整套代码如下：
<!-- 作者：Mr.yang 时间：2019-05-08 描述：练习HTML5动画的特效案例一 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <!--定义CSS区域--> <style type="text/css"> /*声明定义动画，名称为fengche*/ @-webkit-keyframes fengche{ /*0%是指开头动画*/ 0%{ /*转换：旋转*/ transform: rotate(0deg); } /*100%是指结束动画*/ 100%{ /*转换： 旋转（逆时针）*/ transform: rotate(-360deg); } } body{ background-color: #f7f7f7; } .box{ width: 400px; margin: 100px auto ; border: 1px solid #f2f2f2; /*采用CSS3中的动画特效 ：上方定义好的动画关键帧名称[fengche] 速度3.5秒 线性 无限循环 */ animation: fengche 3.5s linear infinite; } img{ width: 100%; } </style> <body> <div class="box"> <img src="img/fengche.png"/> </div> </body> </html>
素材
