CSS动画简单制作

最新推荐文章于 2023-07-19 23:34:57 发布

Stirve unremitting

最新推荐文章于 2023-07-19 23:34:57 发布

阅读量126

点赞数

分类专栏：笔记文章标签： css css3

本文链接：https://blog.csdn.net/weixin_46421045/article/details/104906599

版权

笔记专栏收录该内容

96 篇文章 0 订阅

订阅专栏

<!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>

Stirve unremitting

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS动画简单制作

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;height: 0;} body,html{height: 100%;} ...
复制链接

扫一扫