SVG超人飞翔动画特效-优快云博客

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

<!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>
/* 重置样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* 页面主体样式 */
body {
font-family: 'Arial', sans-serif;
background-color: #1a1a2e;
color: #fff;
overflow: hidden;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

/* 动画容器样式 */
.superman-container {
position: relative;
width: 100%;
height: 100%;
}

/* 超人SVG容器 */
.superman-svg {
position: absolute;
width: 200px;
height: 200px;
animation: fly 8s linear infinite;
}

/* 星星样式 */
.star {
position: absolute;
background-color: #fff;
border-radius: 50%;
animation: twinkle 2s infinite alternate;
}

/* 内容容器 */
.content {
position: absolute;
bottom: 20%;
left: 0;
right: 0;
text-align: center;
opacity: 0;
transform: translateY(20px);
transition: all 1s ease;
z-index: 10;
}

/* 显示内容 */
.content.show {
opacity: 1;
transform: translateY(0);
}

/* 标题样式 */
h1 {
margin-bottom: 20px;
color: #f8d210;
text-shadow: 0 0 10px rgba(248, 210, 16, 0.7);
font-size: 2.5rem;
}

/* 链接样式 */
a {
color: #4cc9f0;
text-decoration: none;
transition: color 0.3s;
}

a:hover {
color: #4895ef;
}

/* 动画定义 */
@keyframes fly {
0% {
transform: translate(-100px, 100px) scale(0.5);
opacity: 0;
}
10% {
opacity: 1;
}
30% {
transform: translate(30vw, -20vh) scale(0.8);
}
50% {
transform: translate(50vw, 10vh) scale(1);
}
70% {
transform: translate(70vw, -15vh) scale(0.8);
}
100% {
transform: translate(100vw, 100px) scale(0.5);
opacity: 0;
}
}

@keyframes twinkle {
from {
opacity: 0.3;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1.2);
}
}
</style>
</head>
<body>

<div class="superman-container">

<div id="stars"></div>


<div class="superman-svg">
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">

<path d="M100 50 L120 100 L150 110 L130 150 L100 170 L70 150 L50 110 L80 100 Z" fill="#ed1d24" stroke="#000" stroke-width="2">
<animate attributeName="fill" values="#ed1d24;#ff5252;#ed1d24" dur="2s" repeatCount="indefinite" />
</path>


<path d="M100 50 L80 60 L70 100 L60 150 L100 170 L140 150 L130 100 L120 60 Z" fill="#0c0c6e" opacity="0.8">
<animateTransform attributeName="transform" type="translate" values="0,0; 5,-5; 0,0; -5,5; 0,0" dur="3s" repeatCount="indefinite" />
</path>


<circle cx="100" cy="40" r="20" fill="#ffdbac" stroke="#000" stroke-width="2" />


<circle cx="93" cy="35" r="3" fill="#000" />
<circle cx="107" cy="35" r="3" fill="#000" />


<path d="M93 50 Q100 55 107 50" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" />


<path d="M100 70 Q110 80 100 90 Q90 100 100 110 Q110 120 100 130" fill="none" stroke="#f8d210" stroke-width="5" stroke-linecap="round">
<animate attributeName="stroke-width" values="5;7;5" dur="1.5s" repeatCount="indefinite" />
</path>
</svg>
</div>


<div class="content" id="content">
<h1>超人飞翔动画</h1>
<p>这是一个使用HTML5 SVG创建的超人飞翔动画特效</p>
<p>动画会循环播放，超人将永远在天空中飞翔！</p>
</div>
</div>

<script>
// 当页面加载完成后执行
window.addEventListener('load', function() {
// 创建星星背景
const starsContainer = document.getElementById('stars');
const starCount = 50;

for (let i = 0; i < starCount; i++) {
const star = document.createElement('div');
star.className = 'star';

// 随机位置和大小
const size = Math.random() * 3 + 1;
const left = Math.random() * 100;
const top = Math.random() * 100;
const delay = Math.random() * 2;

star.style.width = `${size}px`;
star.style.height = `${size}px`;
star.style.left = `${left}vw`;
star.style.top = `${top}vh`;
star.style.animationDelay = `${delay}s`;

starsContainer.appendChild(star);
}

// 显示内容区域
setTimeout(function() {
document.getElementById('content').classList.add('show');
}, 2000);

// 循环超人动画
const supermanSvg = document.querySelector('.superman-svg');

function resetSuperman() {
setTimeout(function() {
supermanSvg.style.animation = 'none';
void supermanSvg.offsetWidth; // 触发重绘
supermanSvg.style.animation = 'fly 8s linear infinite';
}, 8000);
}

// 初始重置
resetSuperman();

// 每8秒重置一次动画
setInterval(resetSuperman, 8000);
});
</script>
</body>
</html>