利用animation和关键帧做一个loading页面
今天学过了css动画之后，就想到利用css动画做一个不一样的页面，于是，他来了
这个动画有几个关键点：
1 .当使用：hover去呈现扩大的样式时，不能改变他的高度，高度是以主轴为基准，向上扩展的，所以会呈现出只向上扩大，解决这个问题，可以使用绝对定位，在改变高度的同时，改变top的位置，使它呈现由中间向两边扩大的样式，或者使用margin，设置为负值，但里边的文字位置也会随之改变，这时可以使用line-height即可。
2.观察可发现"L"与"G"的长度一致，"O"与"N"的长度一样，以此类推，只有"D"单独设置，所以只需设置4个@keyframes就可以了
3.一定要亲手试一试，不试一试永远不知道问题在哪里，以及如何去解决它！
好啦，就说到这里，下面是代码，萌新的新手练习，不足的地方还希望大佬们能多多批评，谢谢啦~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background-color: skyblue;
margin:0;
padding:0;
}
.wrapper{
height: 50px;
width: 500px;
margin:300px auto;
display: flex;
color:#fff;
text-align: center;
line-height: 50px;
}
.wrapper> div{
border-radius: 15px;
margin-left: 10px;
margin-right: 10px;
}
.L{
background-color: #ef475d;
flex:1;
animation: a 1s infinite alternate;
}
.O{
background-color: #3170a7;
flex:1;
animation: b 1s 0.14s infinite alternate;
}
.A{
background-color: #74787a;
flex:1;
animation: c 1s 0.28s infinite alternate;
}
.D{
background-color: #45b787;
flex:1;
animation: d 1s 0.42s infinite alternate;
}
.I{
background-color: #b2cf87;
flex:1;
animation: c 1s 0.56s infinite alternate;
}
.N{
background-color: #f8df70;
flex:1;
animation: b 1s 0.70s infinite alternate;
}
.G{
background-color: #efafad;
flex:1;
animation: a 1s 0.84s infinite alternate;
}
@keyframes a{
from{}
to{
margin-bottom: -20px;
margin-top: -20px;
line-height: 90px;
}
}
@keyframes b{
from{}
to{
margin-bottom: -40px;
margin-top: -40px;
line-height: 130px;
}
}
@keyframes c{
from{}
to{
margin-bottom: -60px;
margin-top: -60px;
line-height: 170px;
}
}
@keyframes d{
from{}
to{
margin-bottom: -80px;
margin-top: -80px;
line-height: 190px;
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="L">L</div>
<div class="O">O</div>
<div class=A>A</div>
<div class="D">D</div>
<div class="I">I</div>
<div class="N">N</div>
<div class="G">G</div>
</div>
</body>
</html>