加载动画
<!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>