【前端小案例】简单的loading加载动画
2022-07-31 本文已影响0人
小杨同学97
前言
发现box-shadow居然还能这么用，以往都只是用来美化按钮之类的。
动画.gif
一、实现思路
利用box-shadow复制出相同阴影盒子，添加动画使阴影盒子运动起来。
二、详细代码
html部分
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简单的loading加载动画Demo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">
<section><span class="loader-1"></span></section>
<section><span class="loader-2"></span></section>
<section><span class="loader-3"></span></section>
<section><span class="loader-4"></span></section>
<section><span class="loader-5"></span></section>
<section><span class="loader-6"></span></section>
</div>
</body>
</html>
css部分
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #504f4f;
}
.content {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 80%;
}
section {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 33.3%;
min-width: 200px;
height: 200px;
}
section:nth-child(2n) {
background: #333333;
}
section:nth-child(2n+1) {
background: #222222;
}
.loader-1 {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background: rgb(255, 255, 255);
animation: shadowExpandX 1s linear infinite;
}
.loader-2 {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background: #ff3d00;
box-shadow: 0px -24px #fff, 0px 24px #fff;
animation: rotate 2s ease-in-out infinite;
}
.loader-3 {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
box-shadow: -24px 0px #fff, 24px 0px #fff;
animation: shadowColor 1s linear infinite;
}
.loader-4 {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
box-shadow: -48px 0px, -16px 0px, 16px 0px, 48px 0px;
color: #fff;
animation: shadowScale 2s linear infinite;
}
.loader-5 {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
box-shadow: -48px 0px, -16px 0px, 16px 0px, 48px 0px;
color: #fff;
animation: shadowJump 2s linear infinite;
}
.loader-6 {
display: inline-block;
position: absolute;
left: calc(50% - 112px);
width: 12px;
height: 12px;
border-radius: 50%;
animation: shadowRolling 2s linear infinite;
}
@keyframes shadowExpandX {
0% {
box-shadow: 0 0, 0 0;
color: rgba(255, 255, 255, 0.2);
}
100% {
box-shadow: -24px 0px, 24px 0px;
color: rgba(255, 255, 255, 0.8);
}
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes shadowColor {
0% {
box-shadow: -24px 0px #ff3d00, 24px 0px #fff;
}
50% {
background: #ff3d00;
}
100% {
box-shadow: -24px 0px #fff, 24px 0px #ff3d00;
}
}
@keyframes shadowScale {
0% {
box-shadow: -48px 0px 0px 4px, -16px 0px, 16px 0px, 48px 0px;
}
33% {
box-shadow: -48px 0px, -16px 0px 0px 4px, 16px 0px, 48px 0px;
}
66% {
box-shadow: -48px 0px, -16px 0px, 16px 0px 0px 4px, 48px 0px;
}
100% {
box-shadow: -48px 0px, -16px 0px, 16px 0px, 48px 0px 0px 4px;
}
}
@keyframes shadowJump {
0% {
box-shadow: -48px -12px, -16px 0px, 16px 0px, 48px 0px;
}
33% {
box-shadow: -48px 0px, -16px -12px, 16px 0px, 48px 0px;
}
66% {
box-shadow: -48px 0px, -16px 0px, 16px -12px, 48px 0px;
}
100% {
box-shadow: -48px 0px, -16px 0px, 16px 0px, 48px -12px;
}
}
@keyframes shadowRolling {
0% {
box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
}
12% {
box-shadow: 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
}
25% {
box-shadow: 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
}
36% {
box-shadow: 120px 0 white, 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0);
}
50% {
box-shadow: 130px 0 white, 120px 0 white, 110px 0 white, 100px 0 white;
}
62% {
box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white, 110px 0 white;
}
75% {
box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white;
}
87% {
box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white;
}
100% {
box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
}
}
gitee地址：siebe/html-css-demo (https://gitee.com/siebe/html-css-demo)
每天一个网页小案例，生活多姿又多彩。
