CSS-doodle.js 螺旋状动画特效

原创已于 2025-06-27 11:28:58 修改 · 494 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-14 13:12:34 首次发布

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS-doodle.js 螺旋状动画特效</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.38.3/css-doodle.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #000;
overflow: hidden;
}

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

.info {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: rgba(255, 255, 255, 0.3);
font-family: Arial, sans-serif;
font-size: 12px;
z-index: 100;
}

.info a {
color: inherit;
text-decoration: none;
}

/* 控制按钮样式 */
.controls {
position: absolute;
top: 20px;
right: 20px;
z-index: 100;
}

.controls button {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
padding: 5px 10px;
margin-left: 5px;
cursor: pointer;
border-radius: 3px;
}

.controls button:hover {
background: rgba(255, 255, 255, 0.2);
}
</style>
</head>
<body>
<div class="container">
<css-doodle>
:doodle {
@grid: 1x100 / 100vmin;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

@place-cell: center;
@size: calc(@index() * 1.5%);

border-radius: 50%;
border: 1px solid hsla(
calc(@index() * 3.6),
100%,
70%,
calc(1 - @index() / 100)
);

transform: rotate(calc(@index() * 5deg))
scale(calc(@index() / 50))
translateY(calc(@index() * -0.5px));

animation: spin 5s linear infinite;
animation-delay: calc(@index() * -0.05s);

@keyframes spin {
to {
transform: rotate(calc(@index() * 5deg + 360deg))
scale(calc(@index() / 50))
translateY(calc(@index() * -0.5px));
}
}
</css-doodle>

<css-doodle>
:doodle {
@grid: 1x50 / 100vmin;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

@place-cell: center;
@size: calc(@index() * 2%);

border-radius: 50%;
border: 1px solid hsla(
calc(@index() * 7.2 + 180),
100%,
70%,
calc(1 - @index() / 50)
);

transform: rotate(calc(@index() * -7deg))
scale(calc(@index() / 25))
translateY(calc(@index() * 0.5px));

animation: spin-reverse 4s linear infinite;
animation-delay: calc(@index() * 0.05s);

@keyframes spin-reverse {
to {
transform: rotate(calc(@index() * -7deg - 360deg))
scale(calc(@index() / 25))
translateY(calc(@index() * 0.5px));
}
}
</css-doodle>

<div class="controls">
<button onclick="refreshDoodles()">刷新效果</button>
</div>


</div>

<script>
function refreshDoodles() {
document.querySelectorAll('css-doodle').forEach(doodle => {
doodle.update();
});
}

// 初始加载和每隔30秒刷新一次
refreshDoodles();
setInterval(refreshDoodles, 30000);
</script>
</body>
</html>