CSS 3.0实现模拟手机加载动画
给大家分享一个用CSS 3.0实现的模拟手机信各异的加载动画，效果如下：
以下是代码实现，欢迎大家复制、粘贴和收藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 3.0实现模拟手机加载动画</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #000;
}
.loader {
display: flex;
align-items: flex-end;
}
.loader span {
width: 20px;
background: #111;
margin: 0 10px;
height: calc(20px * var(--i));
display: flex;
justify-content: center;
align-items: flex-end;
transform: translateY(-35px);
animation: animate 2s linear infinite;
animation-delay: calc(0.25s * var(--i));
}
@keyframes animate {
0% {
background: #fff;
filter: blur(2px);
box-shadow: 0 0 10px #00b3ff,
0 0 20px #00b3ff,
0 0 40px #00b3ff,
0 0 80px #00b3ff,
0 0 120px #00b3ff,
0 0 200px #00b3ff,
0 0 300px #00b3ff,
0 0 400px #00b3ff;
}
25%,
75% {
background: #111;
filter: blur(0px);
box-shadow: none;
}
100% {
background: #fff;
filter: blur(2px);
box-shadow: 0 0 10px #00b3ff,
0 0 20px #00b3ff,
0 0 40px #00b3ff,
0 0 80px #00b3ff,
0 0 120px #00b3ff,
0 0 200px #00b3ff,
0 0 300px #00b3ff,
0 0 400px #00b3ff;
}
}
.loader span i {
display: block;
font-style: normal;
font-size: 50px;
color: #fff;
font-weight: bold;
transform: translateY(70px);
animation: animate2 2s linear infinite;
animation-delay: calc(0.25s * var(--i));
}
@keyframes animate2 {
0% {
color: #fff;
filter: blur(2px);
text-shadow: 0 0 10px #00b3ff,
0 0 20px #00b3ff,
0 0 40px #00b3ff,
0 0 80px #00b3ff,
0 0 120px #00b3ff,
0 0 200px #00b3ff,
0 0 300px #00b3ff,
0 0 400px #00b3ff;
}
25%,
75% {
color: #111;
filter: blur(0px);
text-shadow: none;
}
100% {
color: #fff;
filter: blur(2px);
text-shadow: 0 0 10px #00b3ff,
0 0 20px #00b3ff,
0 0 40px #00b3ff,
0 0 80px #00b3ff,
0 0 120px #00b3ff,
0 0 200px #00b3ff,
0 0 300px #00b3ff,
0 0 400px #00b3ff;
}
}
</style>
</head>
<body>
<div class="loader">
<span style="--i:1"><i>L</i></span>
<span style="--i:2"><i>o</i></span>
<span style="--i:3"><i>a</i></span>
<span style="--i:4"><i>d</i></span>
<span style="--i:5"><i>i</i></span>
<span style="--i:6"><i>n</i></span>
<span style="--i:7"><i>g</i></span>
<span style="--i:8"><i>.</i></span>
</div>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/10/26 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
