CSS3花纹图案动画特效

原创已于 2025-06-27 11:31:31 修改 · 699 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-13 14:16:20 首次发布

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3花纹图案动画特效</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #1a1a2e;
overflow: hidden;
font-family: Arial, sans-serif;
}

.pattern-container {
position: relative;
width: 100%;
height: 100%;
}

.pattern {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background: transparent;
border: 10px solid transparent;
animation: rotate 20s linear infinite;
filter: drop-shadow(0 0 10px rgba(255,255,255,0.3));
}

.pattern:nth-child(1) {
top: 20%;
left: 15%;
border-color: #e94560;
animation-delay: 0s;
animation-duration: 25s;
}

.pattern:nth-child(2) {
top: 60%;
left: 25%;
border-color: #0f3460;
animation-delay: -5s;
animation-duration: 30s;
}

.pattern:nth-child(3) {
top: 30%;
right: 20%;
border-color: #533483;
animation-delay: -10s;
animation-duration: 35s;
}

.pattern:nth-child(4) {
bottom: 20%;
right: 15%;
border-color: #ffd369;
animation-delay: -15s;
animation-duration: 40s;
}

.pattern:nth-child(5) {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-color: #00b4d8;
animation-delay: -20s;
animation-duration: 45s;
}

.pattern::before, .pattern::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 10px solid;
border-color: inherit;
opacity: 0.7;
}

.pattern::before {
transform: rotate(45deg) scale(0.8);
}

.pattern::after {
transform: rotate(90deg) scale(0.6);
}

.title {
position: absolute;
top: 50px;
color: white;
font-size: 36px;
text-shadow: 0 0 10px rgba(0,180,216,0.8);
z-index: 10;
}

.link {
position: absolute;
bottom: 20px;
right: 20px;
color: #00b4d8;
font-size: 14px;
text-decoration: none;
font-weight: bold;
z-index: 10;
}

@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

/* 添加更多花纹元素 */
.floral {
position: absolute;
width: 100px;
height: 100px;
background: transparent;
border-radius: 50%;
animation: floral-rotate 15s linear infinite;
}

.floral::before, .floral::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 5px solid;
border-color: inherit;
}

.floral::before {
transform: rotate(30deg);
}

.floral::after {
transform: rotate(60deg);
}

.floral:nth-child(6) {
top: 10%;
right: 10%;
border-color: #ff9e00;
animation-delay: -2s;
}

.floral:nth-child(7) {
bottom: 10%;
left: 10%;
border-color: #9d4edd;
animation-delay: -4s;
}

.floral:nth-child(8) {
top: 70%;
right: 30%;
border-color: #ff0054;
animation-delay: -6s;
}

@keyframes floral-rotate {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.2); }
100% { transform: rotate(360deg) scale(1); }
}
</style>
</head>
<body>
<div class="pattern-container">
<h1 class="title">CSS3花纹图案动画</h1>

<div class="pattern"></div>
<div class="pattern"></div>
<div class="pattern"></div>
<div class="pattern"></div>
<div class="pattern"></div>

<div class="floral"></div>
<div class="floral"></div>
<div class="floral"></div>


</div>
</body>
</html>