圣诞节水晶球卡通HTML5特效

ziblog

已于 2025-06-27 15:57:59 修改

阅读量397

点赞数 5

CC 4.0 BY-SA版权

文章标签： html5 css css3

于 2025-04-18 16:41:51 首次发布

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

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圣诞节水晶球卡通特效</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #000;
overflow: hidden;
}
.snowglobe {
position: relative;
width: 300px;
height: 400px;
border-radius: 50%;
overflow: hidden;
background: radial-gradient(circle, #b0e0e6, #00008b);
}
.base {
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 20px;
background-color: #8b4513;
border-radius: 10px;
}
.snow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.snowflake {
position: absolute;
background: white;
border-radius: 50%;
opacity: 0.8;
animation: fall 5s infinite linear;
}
.cartoon {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: auto;
}
@keyframes fall {
0% { top: -10%; opacity: 0; }
100% { top: 110%; opacity: 0; }
}
.info {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
color: white;
text-align: center;
font-size: 14px;
}
.info a {
color: #ffebcd;
text-decoration: none;
}
</style>
</head>
<body>
<div class="snowglobe">
<div class="base"></div>
<div class="snow">
<div class="snowflake" style="width: 5px; height: 5px; left: 10%; animation-delay: 0s;"></div>
<div class="snowflake" style="width: 7px; height: 7px; left: 30%; animation-delay: 1s;"></div>
<div class="snowflake" style="width: 4px; height: 4px; left: 50%; animation-delay: 2s;"></div>
<div class="snowflake" style="width: 6px; height: 6px; left: 70%; animation-delay: 3s;"></div>
<div class="snowflake" style="width: 5px; height: 5px; left: 90%; animation-delay: 4s;"></div>
</div>
<img src="cartoon-image.png" alt="卡通角色" class="cartoon"> 
<div class="info">
由 <a href="http://www.gm1.skin" target="_blank">www.gm1.skin</a> 提供灵感
</div>
</div>
<script>
// 此处可添加额外的JavaScript代码，但当前特效无需额外脚本
</script>
</body>
</html>