十分钟实现节日祝福动画，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）