十分钟实现节日祝福动画，CSS+JavaScript实现元旦祝福动画，祝大家元旦快乐
【摘要】 视频
视频地址：https://www.bilibili.com/video/BV1v54y1t7zn
十分钟实现元旦祝福动画，CSS+JavaScript实现节日祝福动画，祝大家元旦快乐
视频已同步到我的B站账号欢迎大家关注。https://space.bilibili.com/563010186
参考代码
HTML:
<!DOC...
视频
视频地址：https://www.bilibili.com/video/BV1v54y1t7zn
十分钟实现元旦祝福动画，CSS+JavaScript实现节日祝福动画，祝大家元旦快乐
视频已同步到我的B站账号欢迎大家关注。
https://space.bilibili.com/563010186
参考代码
HTML:
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>元旦快乐:公众号AlbertYang</title>
-
<link rel="stylesheet" href="style.css">
-
</head>
-
<body>
-
<p>
-
<div class="box">
-
<dic class="circle">
-
<div class="text">
-
<span style="--x:0">元</span>
-
<span style="--x:1">旦</span>
-
<br />
-
<span style="--x:2">快</span>
-
<span style="--x:3">乐</span>
-
</div>
-
</dic>
-
</div>
-
</p>
-
<script>
-
const bubbles = () => {
-
let count = 300;
-
let p = document.querySelector("p");
-
for (let i = 0; i < count; i++) {
-
let bubble = document.createElement('i');
-
let x = Math.floor(Math.random() * window.innerWidth);
-
y = Math.floor(Math.random() * window.innerHeight);
-
-
-
let size = Math.random() * 60;
-
bubble.style.left = x + 'px';
-
bubble.style.top = y + 'px';
-
bubble.style.width = size + 'px';
-
bubble.style.height = size + 'px';
-
bubble.style.animationDuration = 5 + size + 's';
-
bubble.style.animationDelay = -size + 's';
-
-
-
p.appendChild(bubble);
-
}
-
}
-
bubbles()
-
</script>
-
</body>
-
</html>
CSS:
-
* {
-
margin: 0;
-
padding: 0;
-
box-sizing: border-box;
-
}
-
-
-
body {
-
overflow: hidden;
-
}
-
-
-
p {
-
display: flex;
-
justify-content: center;
-
align-items: center;
-
min-height: 100vh;
-
background: #f1f1f1;
-
}
-
-
-
p .box {
-
position: absolute;
-
width: 450px;
-
height: 450px;
-
}
-
-
-
p .box .circle {
-
position: relative;
-
width: 100%;
-
height: 100%;
-
background: linear-gradient(135deg, #fff, #e4e3e8);
-
display: flex;
-
justify-content: center;
-
align-items: center;
-
border-radius: 50%;
-
}
-
-
-
p .box .circle::before {
-
content: "";
-
position: absolute;
-
left: 5px;
-
top: 5px;
-
right: 5px;
-
bottom: 5px;
-
background: linear-gradient(315deg, #fff, #e4e3e8);
-
border-radius: 50%;
-
z-index: 1;
-
}
-
-
-
p .text {
-
position: absolute;
-
font-size: 6em;
-
color: #ff2a2a;
-
z-index: 2;
-
}
-
-
-
p .text span {
-
display: inline-block;
-
animation: blink 3s 2s infinite;
-
animation-delay: calc(var(--x) * 0.5s);
-
}
-
-
-
p i {
-
position: absolute;
-
background: #FF2A2A;
-
border-radius: 50%;
-
animation: animate linear infinite;
-
}
-
-
-
p i:nth-child(even) {
-
background: transparent;
-
border: 1px solid #FF2A2A;
-
}
-
-
-
@keyframes animate {
-
0% {
-
transform: translateY(0);
-
opacity: 0;
-
filter: hue-rotate(0deg);
-
}
-
-
-
10%,
-
90% {
-
opacity: 1;
-
}
-
-
-
100% {
-
transform: translateY(-3000%);
-
opacity: 0;
-
filter: hue-rotate(36000deg);
-
}
-
}
-
-
-
@keyframes blink {
-
0% {
-
transform: scale(0);
-
opacity: 0;
-
filter: hue-rotate(0deg);
-
}
-
-
-
30%,
-
50%,
-
80% {
-
transform: scale(1.3);
-
opacity: 1;
-
}
-
-
-
100% {
-
transform: scale(0);
-
opacity: 0;
-
filter: hue-rotate(3600deg);
-
}
-
}
今天的学习就到这里了，由于本人能力和知识有限，如果有写的不对的地方，还请各位大佬批评指正。如果想继续学习提高，欢迎关注我，每天进步一点点，就是领先的开始，加油。如果觉得本文对你有帮助的话，欢迎转发，评论，点赞！！！
文章来源: albertyang.blog.csdn.net，作者：Albert Yang，版权归原作者所有，如需转载，请联系作者。
原文链接：albertyang.blog.csdn.net/article/details/112057323
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）