CSS3彩虹点动画特效

ziblog

已于 2025-06-27 13:23:09 修改

阅读量358

点赞数 5

CC 4.0 BY-SA版权

文章标签： css css3 前端

于 2025-06-09 16:57:23 首次发布

本文链接：https://blog.csdn.net/zichenblog/article/details/148538369

<!DOCTYPE html>
<html lang="zh-CN">
<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;
background-color: #121212;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.rainbow-container {
position: relative;
width: 300px;
height: 300px;
}

.dot {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
animation: rainbow-move 4s infinite ease-in-out;
filter: blur(1px);
box-shadow: 0 0 10px currentColor;
}

.dot:nth-child(1) {
background-color: #ff0000;
top: 50%;
left: 50%;
animation-delay: 0s;
}

.dot:nth-child(2) {
background-color: #ff7f00;
top: 30%;
left: 30%;
animation-delay: 0.2s;
}

.dot:nth-child(3) {
background-color: #ffff00;
top: 30%;
left: 70%;
animation-delay: 0.4s;
}

.dot:nth-child(4) {
background-color: #00ff00;
top: 70%;
left: 30%;
animation-delay: 0.6s;
}

.dot:nth-child(5) {
background-color: #0000ff;
top: 70%;
left: 70%;
animation-delay: 0.8s;
}

.dot:nth-child(6) {
background-color: #4b0082;
top: 10%;
left: 50%;
animation-delay: 1s;
}

.dot:nth-child(7) {
background-color: #9400d3;
top: 90%;
left: 50%;
animation-delay: 1.2s;
}

@keyframes rainbow-move {
0%, 100% {
transform: translate(0, 0) scale(1);
opacity: 1;
}
25% {
transform: translate(-50px, -50px) scale(1.5);
opacity: 0.7;
}
50% {
transform: translate(50px, -50px) scale(0.8);
opacity: 0.9;
}
75% {
transform: translate(-50px, 50px) scale(1.2);
opacity: 0.6;
}
}

.link {
position: absolute;
bottom: 20px;
color: #666;
font-family: Arial, sans-serif;
text-decoration: none;
}
</style>
</head>
<body>
<div class="rainbow-container">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>


</body>
</html>