【响应式Web前端设计】HTML+CSS3 旋转齿轮特效

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>html5+css3 齿轮滚动动画特效 </title>
	<link rel="stylesheet" href="css/css.css">
</head>
	<body>
		<div class="back">
			<div class="content">
				<div class="img1"></div>
				<div class="img2"></div>
				<div class="img3"></div>
				<div class="img4"></div>
				<div class="img5"></div>
				<div class="img6"></div>
				<div class="img7"></div>
				<div class="img8"></div>
				<div class="img9"></div>
				<div class="img10"></div>
				<div class="img11"></div>
			</div>
		</div>
	</body>
</html>


*{
	margin: 0;
	padding: 0;
}
body,html{
	height: 100%;
}
/* 设置背景 */
.back{
	height: 100%;
	background: url("../images/bg_03.jpg") no-repeat center;
}
/* 对包含所有图片的div进行相对定位 */
.content{
	height:787px;
	width: 800px;
	position: relative;
	margin: 0 auto;
}
/* 对所有图片进行绝对定位 */
.content div{
	position: absolute;
}
/* 水滴 */
.img1{
	height: 50px;
	width: 50px;
	top: 191px;
    left: 391px;
	background: url("../images/icon-1.png") no-repeat center; 
	animation:water 2s ease-in-out infinite;
}

/* 左边第一大 */
.img7{
	height: 252px;
    width: 242px;
    top: 87px;
    left: 54px;
	background: url("../images/icon-7.png") no-repeat center;
}
/* 左边第二大 */
.img4{
	height: 148px;
    width: 144px;
    top: 203px;
    left: 272px;
	background: url("../images/icon-4.png") no-repeat center;
}
/* 左边最小 */
.img2{
	height: 75px;
    width: 73px;
    top: 103px;
    left: 4px;
	background: url("../images/icon-2.png") no-repeat center;
}
/* 左边身体的手 */
.img8{
	height: 50px;
    width: 50px;
    top: 286px;
    left: 268px;
	background: url("../images/icon-8.png") no-repeat center;
}
/* 右边第一大 */
.img6{
	height: 214px;
    width: 194px;
    top: 96px;
    left: 455px;
	background: url("../images/icon-6.png") no-repeat center;
}
/* 右边第二大 */
.img3{
	height: 116px;
    width: 121px;
    top: 54px;
    left: 600px;
	background: url("../images/icon-3.png") no-repeat center;
}
/* 右边最小 */
.img5{
	height: 117px;
    width: 112px;
    top: 245px;
    left: 403px;
	background: url("../images/icon-5.png") no-repeat center;
}
/* 右边男手 */
.img9{
	height: 50px;
    width: 50px;
    top: 310px;
    left: 513px;
	background: url("../images/icon-9.png") no-repeat center;
}
/* 右边女手 */
.img10{
	height: 50px;
    width: 50px;
    top: 242px;
    left: 619px;
	background: url("../images/icon-10.png") no-repeat center;
}
/* 人物背景 */
.img11{
	height: 709px;
    width: 788px;
    bottom: -2px;
	background: url("../images/img.png") no-repeat center;

}
/* img2,img4,img6 顺时针 */
.img2,.img4,.img6{
	animation:rotate1 8s ease-in-out infinite;
}
/* img3,img5,img7 逆时针 */
.img3,.img5,.img7{
	animation:rotate2 8s ease-in-out infinite;
}


/* 动画 顺时针 以Z轴为中心*/
@keyframes rotate1{
	0%{
		transform:rotateZ(0deg);
	}
	100%{
		transform:rotateZ(360deg);
	}
}

/* 动画 逆时针 以Z轴为中心*/
@keyframes rotate2{
	0%{
		transform:rotateZ(0deg);
	}
	100%{
		transform:rotateZ(-360deg);
	}
}

/* 动画 水滴效果 */
@keyframes water{
	0%{
		/*变透明*/
		opacity: 0;
	}
	100%{
		/*向下移动*/
		top:600px;
	}
}

在这里插入图片描述

李响Superb CSDN认证博客专家 机器学习 TensorFlow 图像处理
成为一名优秀的算法工程师⬆️ ,
目前还在读软件工程,
AI攻防、算法和深度学习方向,
微博同名❤️ :李响Superb,
(记得关注,有问题微博私信!)
我们一起努力呀!
©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:白松林 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值