HTML5+CSS3齿轮滚动动画特效_写一个html要求有2个齿轮一直在转动-优快云博客

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148902460

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5+CSS3齿轮滚动动画特效</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
background-color: #2c3e50;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
color: #ecf0f1;
overflow: hidden;
}

.container {
text-align: center;
position: relative;
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 40px 20px;
}

h1 {
font-size: 2.5rem;
margin-bottom: 30px;
text-shadow: 0 2px 5px rgba(0,0,0,0.3);
position: relative;
z-index: 10;
}

.note {
background-color: rgba(236, 240, 241, 0.1);
padding: 15px;
border-left: 4px solid #e67e22;
margin: 20px 0 40px;
border-radius: 0 4px 4px 0;
position: relative;
z-index: 10;
}

.note a {
color: #e67e22;
text-decoration: none;
font-weight: bold;
}

.note a:hover {
text-decoration: underline;
}

.gear-system {
position: relative;
width: 100%;
height: 400px;
margin: 50px auto;
}

/* 齿轮基础样式 */
.gear {
position: absolute;
background-color: #34495e;
border-radius: 50%;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
display: flex;
align-items: center;
justify-content: center;
border: 10px solid #2c3e50;
}

/* 齿轮齿样式 */
.gear:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background:
repeating-conic-gradient(
#2c3e50 0deg 30deg,
#34495e 30deg 60deg
);
border-radius: 50%;
transform: scale(0.9);
}

/* 中心孔样式 */
.gear:after {
content: '';
position: absolute;
width: 25%;
height: 25%;
background-color: #2c3e50;
border-radius: 50%;
border: 5px solid #ecf0f1;
}

/* 大齿轮1 */
.gear-large-1 {
width: 200px;
height: 200px;
top: 50px;
left: 50%;
transform: translateX(-50%);
animation: rotate-clockwise 10s linear infinite;
}

/* 大齿轮2 */
.gear-large-2 {
width: 180px;
height: 180px;
top: 250px;
left: 50%;
transform: translateX(-50%);
animation: rotate-counter-clockwise 8s linear infinite;
}

/* 中齿轮1 */
.gear-medium-1 {
width: 140px;
height: 140px;
top: 120px;
left: 25%;
animation: rotate-clockwise 6s linear infinite;
}

/* 中齿轮2 */
.gear-medium-2 {
width: 140px;
height: 140px;
top: 120px;
left: 75%;
animation: rotate-counter-clockwise 6s linear infinite;
}

/* 小齿轮1 */
.gear-small-1 {
width: 80px;
height: 80px;
top: 50px;
left: 15%;
animation: rotate-counter-clockwise 4s linear infinite;
}

/* 小齿轮2 */
.gear-small-2 {
width: 80px;
height: 80px;
top: 50px;
left: 85%;
animation: rotate-clockwise 4s linear infinite;
}

/* 小齿轮3 */
.gear-small-3 {
width: 80px;
height: 80px;
top: 270px;
left: 15%;
animation: rotate-clockwise 4s linear infinite;
}

/* 小齿轮4 */
.gear-small-4 {
width: 80px;
height: 80px;
top: 270px;
left: 85%;
animation: rotate-counter-clockwise 4s linear infinite;
}

/* 连接轴 */
.connector {
position: absolute;
background-color: #7f8c8d;
z-index: -1;
}

.connector-1 {
width: 20px;
height: 100px;
top: 150px;
left: 50%;
transform: translateX(-50%);
}

.connector-2 {
width: 20px;
height: 60px;
top: 170px;
left: 25%;
transform: translateX(-50%) rotate(20deg);
}

.connector-3 {
width: 20px;
height: 60px;
top: 170px;
left: 75%;
transform: translateX(-50%) rotate(-20deg);
}

/* 动画定义 */
@keyframes rotate-clockwise {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

@keyframes rotate-counter-clockwise {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}

/* 响应式调整 */
@media (max-width: 768px) {
.gear-system {
height: 300px;
}

.gear-large-1 {
width: 150px;
height: 150px;
top: 30px;
}

.gear-large-2 {
width: 130px;
height: 130px;
top: 200px;
}

.gear-medium-1, .gear-medium-2 {
width: 100px;
height: 100px;
top: 90px;
}

.gear-small-1, .gear-small-2,
.gear-small-3, .gear-small-4 {
width: 60px;
height: 60px;
}

.gear-small-1, .gear-small-2 {
top: 30px;
}

.gear-small-3, .gear-small-4 {
top: 220px;
}

.connector-1 {
height: 70px;
top: 110px;
}

.connector-2, .connector-3 {
height: 40px;
top: 120px;
}
}

/* 背景装饰元素 */
.bg-circle {
position: absolute;
border-radius: 50%;
opacity: 0.1;
z-index: -1;
}

.bg-circle-1 {
width: 300px;
height: 300px;
background-color: #e74c3c;
top: -100px;
right: -100px;
}

.bg-circle-2 {
width: 200px;
height: 200px;
background-color: #3498db;
bottom: -50px;
left: -50px;
}

.bg-circle-3 {
width: 150px;
height: 150px;
background-color: #2ecc71;
top: 50%;
left: 20%;
}
</style>
</head>
<body>
<div class="container">
<h1>HTML5+CSS3齿轮滚动动画特效</h1>

<div class="gear-system">

<div class="connector connector-1"></div>
<div class="connector connector-2"></div>
<div class="connector connector-3"></div>


<div class="gear gear-large-1"></div>
<div class="gear gear-large-2"></div>


<div class="gear gear-medium-1"></div>
<div class="gear gear-medium-2"></div>


<div class="gear gear-small-1"></div>
<div class="gear gear-small-2"></div>
<div class="gear gear-small-3"></div>
<div class="gear gear-small-4"></div>
</div>


<div class="bg-circle bg-circle-1"></div>
<div class="bg-circle bg-circle-2"></div>
<div class="bg-circle bg-circle-3"></div>
</div>
</body>
</html>