十分钟实现节日祝福动画，CSS+JavaScript实现元旦祝福动画，祝大家元旦快乐
十分钟实现节日祝福动画，CSS+JavaScript实现元旦祝福动画，祝大家元旦快乐
AlbertYang
发布于 2021-01-12 14:53:58
发布于 2021-01-12 14:53:58
参考代码
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元旦快乐:公众号AlbertYang</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<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>
</section>
<script>
const bubbles = () => {
let count = 300;
let section = document.querySelector("section");
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';
section.appendChild(bubble);
}
}
bubbles()
</script>
</body>
</html>CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
}
section {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f1f1f1;
}
section .box {
position: absolute;
width: 450px;
height: 450px;
}
section .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%;
}
section .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;
}
section .text {
position: absolute;
font-size: 6em;
color: #ff2a2a;
z-index: 2;
}
section .text span {
display: inline-block;
animation: blink 3s 2s infinite;
animation-delay: calc(var(--x) * 0.5s);
}
section i {
position: absolute;
background: #FF2A2A;
border-radius: 50%;
animation: animate linear infinite;
}
section 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);
}
}本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-12-31，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读