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

朱雀 2022-10-15 11:58 158阅读 0赞

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70]: /images/20221014/a6ff66b04ebb482f90a27d8809d8f445.png