SVG页面打开动画特效-优快云博客

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

<!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: #f5f5f5;
color: #333;
overflow-x: hidden;
}

/* 动画容器样式 */
.animation-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
z-index: 1000;
}

/* SVG样式 */
svg {
width: 200px;
height: 200px;
}

/* 主要内容容器 */
.content {
padding: 20px;
text-align: center;
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease;
}

/* 当动画完成后显示内容 */
.content.show {
opacity: 1;
transform: translateY(0);
}

/* 标题样式 */
h1 {
margin-bottom: 20px;
color: #2c3e50;
}

/* 段落样式 */
p {
margin-bottom: 15px;
line-height: 1.6;
}

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

a:hover {
color: #2980b9;
}
</style>
</head>
<body>

<div class="animation-container" id="animationContainer">
<svg id="logo" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">

<circle id="circle" cx="100" cy="100" r="80" stroke="#3498db" stroke-width="10" fill="none" stroke-dasharray="502" stroke-dashoffset="502">
<animate attributeName="stroke-dashoffset" from="502" to="0" dur="1.5s" fill="freeze" begin="0s" />
</circle>


<path id="check" d="M50 100 L85 135 L150 70" stroke="#2ecc71" stroke-width="10" fill="none" stroke-dasharray="130" stroke-dashoffset="130">
<animate attributeName="stroke-dashoffset" from="130" to="0" dur="0.8s" fill="freeze" begin="1.5s" />
</path>
</svg>
</div>


<div class="content" id="content">
<h1>欢迎来到我们的网站</h1>
<p>这是一个使用HTML5 SVG创建的页面打开动画特效。</p>
<p>动画完成后，您将看到这个内容区域淡入显示。</p>
<p>感谢您的访问！</p>
</div>

<script>
// 当页面加载完成后执行
window.addEventListener('load', function() {
// 获取动画容器和内容元素
const animationContainer = document.getElementById('animationContainer');
const content = document.getElementById('content');

// 动画总时长 (圆形动画1.5秒 + 对勾动画0.8秒 + 0.5秒延迟)
const totalAnimationTime = 2800;

// 动画完成后隐藏动画容器并显示内容
setTimeout(function() {
// 隐藏动画容器
animationContainer.style.opacity = '0';

// 显示内容区域
content.classList.add('show');

// 动画结束后移除动画容器
setTimeout(function() {
animationContainer.style.display = 'none';
}, 500);
}, totalAnimationTime);
});
</script>
</body>
</html>