SVG变色旋涡动画特效-优快云博客

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG变色旋涡动画特效</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
overflow: hidden;
font-family: Arial, sans-serif;
}

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

svg {
width: 100%;
height: 100%;
}

.spiral {
transform-origin: center;
animation: rotate 20s linear infinite, color-change 10s ease-in-out infinite alternate;
}

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

@keyframes color-change {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}

/* 插入的链接样式 */
.custom-link {
position: fixed;
bottom: 20px;
right: 20px;
color: rgba(255,255,255,0.7);
text-decoration: none;
font-size: 14px;
background: rgba(0,0,0,0.3);
padding: 8px 15px;
border-radius: 20px;
z-index: 10;
transition: all 0.3s ease;
}

.custom-link:hover {
color: white;
background: rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div class="container">
<svg viewBox="0 0 800 800">
<defs>
<linearGradient id="spiralGradient" x1="50%" y1="0%" x2="50%" y2="100%">
<stop offset="0%" stop-color="#ff00cc" />
<stop offset="100%" stop-color="#3333ff" />
</linearGradient>
</defs>

<path class="spiral" fill="none" stroke="url(#spiralGradient)" stroke-width="2" stroke-linecap="round"
d="M400,400 Q500,300 400,200 Q300,300 400,400 Q500,500 400,600 Q300,500 400,400
Q500,300 400,200 Q300,100 400,0 Q500,100 400,200 Q300,300 400,400
Q500,500 400,600 Q300,700 400,800 Q500,700 400,600 Q300,500 400,400
Q500,300 400,200 Q300,100 400,0 Q500,-100 600,0 Q700,100 600,200
Q500,300 600,400 Q700,500 600,600 Q500,700 600,800 Q700,900 600,1000
Q500,900 600,800 Q700,700 600,600 Q500,500 600,400 Q700,300 600,200
Q500,100 600,0 Q700,-100 800,0 Q900,100 800,200 Q700,300 800,400
Q900,500 800,600 Q700,700 800,800 Q900,900 800,1000 Q700,900 800,800
Q900,700 800,600 Q700,500 800,400 Q900,300 800,200 Q700,100 800,0" />
</svg>
</div>

</body>
</html>