杨校老师课堂之HTML5动画特效的风车案例

最新推荐文章于 2022-03-17 22:58:10 发布

杨校

最新推荐文章于 2022-03-17 22:58:10 发布

阅读量1.9k

点赞数 3

分类专栏： HTML 文章标签： HTML5动画案例 HTML5风车案例 CSS3风车案例 CSS3动画案例

本文链接：https://blog.csdn.net/kese7952/article/details/89977456

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

通过所学的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>