加载动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实现动画特效</title>
</head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: bisque;
}
section{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* span是行内元素,必须转换成块状元素才能设置宽高 */
.dot{
/* flex属于行内块元素 */
display: flex;
width: 250px;
height: 250px;
position: relative;
}
.dot span{
position: absolute;
left: 50%;
width:10px ;
height: 10px;
border-radius: 50%;
background-color: black;
transform: rotate(calc(45deg * var(--i)));
/* transform-origin 属性允许您改变被转换元素的位置。
2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。 */
transform-origin:center 40px ;
animation: loading 1.2s ease-in infinite;
animation-delay: calc(0.06s * var(--i));
}
/* 设置动画 */
@keyframes loading{
0%{opacity: 1;}
100%{opacity: 0.2;}
}
</style>
<body>
<section>
<div class="dot">
<!-- 延迟秒数与--i后面的数字相乘,即是每个小圆点的延迟 -->
<span style="--i:1"></span>
<span style="--i:2"></span>
<span style="--i:3"></span>
<span style="--i:4"></span>
<span style="--i:5"></span>
<span style="--i:6"></span>
<span style="--i:7"></span>
<span style="--i:8"></span>
</div>
</section>
</body>
</html>
加载动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿液体加载动画</title>
</head>
<style>
*{padding: 0; margin: 0; box-sizing: border-box;}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.loader{
width: 550px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
filter: blur(10px) contrast(18);
}
.loader_item{
position: relative;
left: 15px;
width: 55px;
height: 55px;
border-radius: 100%;
background-color: #0e4961;
}
.loader_item:nth-child(odd){
animation:yeti 3.5s 0.2s linear infinite ;
}
.loader_item:nth-child(2n){
animation:yeti1 2.3s ease-in-out .1s infinite ;
}
.loader_item:nth-child(4n){
animation-direction: reverse;
}
@keyframes yeti1{
50%{transform: scale(1.8);}
70%{transform: scale(0.8);}
}
@keyframes yeti{
0%{
transform: rotate(0deg) translate(50px);
}
100%{
transform: rotate(360deg) translate(50px);
}
}
</style>
<body>
<div class="loader">
<div class="loader_item"></div>
<div class="loader_item"></div>
<div class="loader_item"></div>
<div class="loader_item"></div>
<div class="loader_item"></div>
<div class="loader_item"></div>
<div class="loader_item"></div>
<div class="loader_item"></div>
</div>
</body>
</html>
竖线加载动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>加载动画</title>
</head>
<style>
body{background-color: pink;}
/* 设置位置 */
.loading{
display: flex;
position:absolute;
top:50%;left: 50%;
/* X轴移动50%,Y轴移动50%,就是居中 */
transform: translate(-50%,-50%);
align-items: center;
}
/* 小竖条 */
.item{
height: 70px;
width: 4px;
background-color: white;
margin-right: 4px;
border-radius: 15%;
/* 动画名称,循环时间,循环次数 */
animation: loading 1s infinite;
}
/* 设置动画 */
@keyframes loading{
0%{height: 0px;}
50%{height: 50px;}
100%{height: 0px;}
}
/* 为每一个竖条设置延时 */
.item:nth-child(2){
animation-delay: 0.1s;
}
.item:nth-child(3){
animation-delay: 0.2s;
} .item:nth-child(4){
animation-delay: 0.3s;
} .item:nth-child(5){
animation-delay: 0.4s;
} .item:nth-child(6){
animation-delay: 0.5s;
} .item:nth-child(7){
animation-delay: 0.6s;
}
.item:nth-child(8){
animation-delay: 0.7s;
}
</style>
<body>
<div class="loading">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>