834 views

利用CSS3制作一个旋转风车动画

在css中插入如下针对图片(一个风车)的style代码

img{
animation-name: cartoon; / 定义动画的名字叫“cartoon” /

animation-duration: 10s; / 定义一次动画持续时间/

animation-iteration-count: infinite; / 定义动画循环播放/

animation-timing-function: linear; / 定义动画播放速度相同/

}

@keyframes cartoon{ /对名字叫“cartoon”的动画进行动作 /

from{transform: rotate(0deg);} / 定义动画开始和结束的角度/

to{transform: rotate(-360deg);} / 定义动画旋转的角度*/

}

在body中插入一张图片:<img src="fengche.jpg">

<!-- 下面是一个图片翻转到另一个图片的代码 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			ul {
				margin: 70px auto;
				width: 960px;
				border: 1px dashed black;
				overflow: hidden;
			}

			li {
				width: 291px;
				height: 251px;
				float: left;
				margin-right:0;
				margin-bottom: 40px;
				position: relative;
				perspective: 230px;
				overflow: hidden;
			}
			li img {
				width: 291px;height: 251px;
				position: absolute;
				left:0px;
				top:0px;
				-webkit-backface-visibility: hidden;
				transition: all 0.5s ease-in 0s;
			}
			li img.m2{
				transform: rotateX(-180deg);
			}
			ul li:hover img.m2{transform:rotateX(0deg);}
			ul li:hover img.m1{transform:rotateX(180deg);}
		</style>
	</head>
	<body>
		<ul>
			<li>
			<img class="m1" src="images/atlas.jpg">
			<img class="m2" src="images/coldplay.jpg">
			</li>
			<li>
			<img class="m1" src="images/dont_panic.jpg">
			<img class="m2" src="images/coldplay.jpg">
			</li>
		</ul>
	</body>
</html>