今日练习之摩天轮动画

最新推荐文章于 2022-03-20 22:17:40 发布

Pursuit53

最新推荐文章于 2022-03-20 22:17:40 发布

阅读量4.8k

点赞数

文章标签： css3 animation

本文链接：https://blog.csdn.net/Pursuit53/article/details/104665612

版权

今天学习了CSS3的动画属性，实现的效果很炫酷，练习了一个很漂亮的简单的动态摩天轮，忍不住分享出来，忍不住想要去坐真的摩天轮啦，嘻嘻嘻~
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{margin:0;padding:0;}
			body,html{height: 100%;}
			body{
				background:url(img/2.jpg) no-repeat;
				background-size: cover;
			}
			.box,.content{
				width:768px;
				height:768px;
				
				position: fixed;
				top: 50%;
				left: 50%;
				margin: -384px 0 0 -384px;
			}
			.img1{
				position: absolute;
				top: 50%;
				left: 0;
				right: 0;
				margin: auto;
				
			}
			.img2{
				animation:wheel 20s linear infinite;
			}
			.img2,.img3{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom:0;
				margin: auto;
			}
			
			/*小孩的父元素*/
			.content img{
				position: absolute;
				animation: kids 20s linear infinite;
			}
			/*第一个小孩，位置是在top为0，左右居中位置*/
			.content img:nth-child(1){
				top: 0;
				right: 0;
				left: 0;
				margin: auto;
			}
			/*第二个小孩，位置是在bottom为0，左右居中位置*/
			.content img:nth-child(2){
				right: 0;
				bottom: 0;
				left: 0;
				margin: auto;
			}
			/*第三个小孩，位置是在lfet为0,上下居中位置*/
			.content img:nth-child(3){
				top: 0;
				bottom: 0;
				left: 0;
				margin: auto;	
			}
			/*第四个小孩，位置是在right为0，左右居中位置*/
			.content img:nth-child(4){
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
			/*第五个小孩，位置是在左上角位置*/
			.content img:nth-child(5){
				top: 70px;
				left:70px;
			}
			/*第六个小孩，位置是在右上角位置*/
			.content img:nth-child(6){
				top: 70px;
				right:70px;
			}
			/*第七个小孩，位置是在左下角位置*/
			.content img:nth-child(7){
				bottom: 70px;
				left:70px;
			}
			/*第八个小孩，位置是在右下角位置*/
			.content img:nth-child(8){
				bottom: 70px;
				right:70px;
			}
			.content{
				animation:wheel 20s linear infinite;
			}
			
			/*轮子与孩子的父元素都是正向转*/
			@keyframes wheel{
				from{transform: rotate(0deg);}
				to{transform: rotate(360deg);}
			}
			/*想要实现轮子转而小孩一直是头朝上，就得同时让小孩往相反的方向转*/
			@keyframes kids{
				from{transform: rotate(0deg);}
				to{transform: rotate(-360deg);}
			}	
		</style>
	</head>
	<body>
		<div class="box">
			
			
			<img class="img1" src="img/bracket.png"/> <!--支架-->                               
			<img class="img2" src="img/fsw.png"/><!--轮子-->
			<img class="img3" src="img/big-title.png"/><!--标题-->
		</div>
		<div class="content">   <!--小孩的父元素-->
			<img src="img/boy.png"/>
			<img src="img/dog.png"/>
			<img src="img/girl.png"/>
			<img src="img/girls.png"/>
			<img src="img/hairboy.png"/>
			<img src="img/mimi.png"/>
			<img src="img/mudog.png"/>
			<img src="img/shamegirl.png"/>
		</div>
	</body>
</html>