HTML+CSS3 旋转齿轮特效

前期准备

position: relative;
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

position: absolute;
生成相对定位的元素,相对于其正常位置进行定位。

@keyframes
@keyframes 动画名 (持续时间百分比{css样式属性})
动画名:必须要有
百分比合法值(必须要有):
0-100%
from (和0%相同)
to (和100%相同)

animation
将动画属性绑定到相应的html元素上

transform:translateZ(z);
进行3D转换,以z轴为中心进行旋转,括号里写具体旋转的度数

注意: 关于@keyframes,animation,transfrom属性更详细的介绍我在前面已经讲过,地址:https://blog.csdn.net/weixin_44592738/article/details/103222753

思路:

  1. 完成页面静态布局
  2. 确定相应齿轮的旋转方向
  3. 设置瞬时间动画,逆时针动画和水滴动画
  4. 运行代码

代码

html:

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

css:

*{
     
	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;
	}
}

运行效果

HTML+CSS3 旋转齿轮特效_第1张图片

总结

  1. 在编写代码中因transform写成了transfrom,导致程序运行出错
  2. 在设置背景时,一定要设置相应的宽和高,否则内容显示不出来
  3. img标签和background-image的区别是:img是标签,代表文档内容,background-image是属性,代表样式设计。

你可能感兴趣的:(css3高级开发,css3,html,旋转特效,2D,齿轮)