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

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

<!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;
height: 100vh;
background-color: #f0f0f0;
}
svg {
width: 100%;
height: 100%;
}
.circle {
fill: none;
stroke: #3498db;
stroke-width: 2;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: drawCircle 3s ease-in-out forwards;
}
.text {
font-family: 'Microsoft YaHei', sans-serif;
font-size: 24px;
fill: #333;
opacity: 0;
animation: fadeIn 1s ease-in-out 2s forwards;
}
@keyframes drawCircle {
to {
stroke-dashoffset: 0;
}
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
</style>
</head>
<body>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<circle class="circle" cx="100" cy="100" r="50"></circle>
<text class="text" x="100" y="110" text-anchor="middle">欢迎访问我的网站</text>
</svg>
</body>
</html>