CSS动画简单制作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;height: 0;}
			body,html{height: 100%;}
			body{background: url(img/img3/2.jpg)no-repeat;background-size:100% 100%  ;overflow: hidden;}
			.box1{background: url(img/img3/bracket.png)no-repeat center bottom;
			position: fixed;right: 0px;left: 0px;bottom: -130px;margin: auto;width: 358px;height: 530px;}
			.box1 img:nth-child(1){width: 768px;height: 768px;position: absolute;top: -351px;left:-202px;animation: zd1 15s infinite linear;}
			.box2{width: 770px;height: 770px;/*background: aquamarine;*/position: absolute;top: 0px;left: 0px; bottom:0px;right:0px;margin: auto;/*background: rgba(0,100,200,0.5);*/animation: zd2 15s infinite linear;}
			.box2 img{width: 130px;height: 170px;position: absolute;animation: zd3 15s infinite linear;transform-origin: top center;}
			.box2 img:nth-child(1){left: 332px;top: 49px;}
			.box2 img:nth-child(2){left: 582px;top: 134px;}
			.box2 img:nth-child(3){left: 683px;top: 391px;}
			.box2 img:nth-child(4){left: 575px;top: 632px;}
			.box2 img:nth-child(5){left: 339px;top: 736px;}
			.box2 img:nth-child(6){left: -38px;top: 398px;}
			.box2 img:nth-child(7){left: 78px;top: 635px;}
			.box2 img:nth-child(8){left: 68px;top: 127px;}
			@keyframes zd1{
				0%{transform: rotate(0deg);}
				50%{transform: rotate(180deg);}
				100%{transform: rotate(360deg);}
				
			}
			@keyframes zd2{
				0%{transform: rotate(0deg);}
				50%{transform: rotate(180deg);}
				100%{transform: rotate(360deg);}
				
			}
				@keyframes zd3{
				0%{transform: rotate(0deg);}
				50%{transform: rotate(-180deg);}
				100%{transform: rotate(-360deg);}
				
			}
			.box1 p{font-size: 50px;color: #5F9EA0;font-weight: bold;z-index: 1;top: 0px;left: 0px;width: 200px;height: 150px;}
			.box1 img:nth-child(3){width: 577px;height: 257px;position: absolute;top: -85px;left: -106px;}
		</style>
	</head>
	<body>
		<div class="box1">
			<img src="img/img3/fsw.png"/>
			<img src="img/img3/big-title.png"/>
			<img src="img/img3/big-title.png"/>
		</div>
		<div class="box2">
			<img src="img/img3/boy.png"/>
			<img src="img/img3/dog.png"/>
			<img src="img/img3/girl.png"/>
			<img src="img/img3/girls.png"/>
			<img src="img/img3/hairboy.png"/>
			<img src="img/img3/mimi.png"/>
			<img src="img/img3/mudog.png"/>
			<img src="img/img3/shamegirl.png"/>
		</div>
	</body>
</html>
weixin_46421045
发布了40 篇原创文章 · 获赞 1 · 访问量 1142
私信关注
猜你喜欢
