windows加载动画
我们先来看看实现效果
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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<p>Windows正在加载...</p>
</div>
</body>
</html>
css代码
:root{
--background-color: rgb(46, 48, 51);
}
*{
margin: 0;
padding: 0;
}
html{
font-size: 14px;
}
body{
width: 100vw;
height: 100vh;
background-color: var(--background-color);
display: flex;
justify-content: center;
align-items: center;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.container{
width: 500px;
height: 500px;
/* background-color:aquamarine; */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #FFF;
font-size: 18px;
}
.loader{
position: relative;
width: 100px;
height: 100px;
margin: 10px;
/* background-color: violet; */
}
.loader span{
position: absolute;
width: 100px;
height: 100px;
animation: animate 3.5s linear infinite;
}
.loader span::before{
position: absolute;
content: "";
background-color: #fff;
width: 10px;
height: 10px;
bottom: 0;
left: calc(50% - 5px);
border-radius: 50%;
}
.loader span:nth-child(1){animation-delay: 0.1s;}
.loader span:nth-child(2){animation-delay: 0.2s;}
.loader span:nth-child(3){animation-delay: 0.3s;}
.loader span:nth-child(4){animation-delay: 0.4s;}
.loader span:nth-child(5){animation-delay: 0.5s;}
@keyframes animate{
70%{
transform: rotate(600deg);
opacity: 1;
}
79%{
transform: rotate(720deg);
}
80%{
transform: rotate(720deg);
opacity: 0;
}
100%{
transform: rotate(810deg);
opacity: 0;
}
}
今日份知识总结
标签 | 作用 |
---|---|
calc() | calc() 函数用于动态计算长度值。需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px); |
说一下设计思路:
一个大的container,里面有loader(好多点点),和一句话(p,这个没什么好说的)
关键是那个转圈的点点怎么实现:
1.span是空的,我门写一个before,指定width和height,它就变成正方形小块了,通过border-radius将它变成圆形。
2.然后将小球移动到的中间下面的位置,我们写一个小球旋转的动画,必定内切,不用我多解释了把!
3.然后写一个小球的延时,就会有多个小球依次旋转了
4.然后我们通过opacity控制小球的消失,就完成了windows加载动画的效果了!