Create a loading page using animation and keyframes
After learning CSS animation today, I thought of using CSS animation to make a different page, so he came
This animation has a few key points:
1. When using: Hover to the style of the expansion, can’t change his height, height based on the main shaft, scaling up, so they will show up only increase, solve the problem, can use absolute positioning, while level change, change the position of the top, make it present the style from the middle to both sides to expand, or use a margin, is set to a negative value, But the position of the text inside will also change, so use line-height.
2. It can be observed that the length of “L” is the same as that of “G”, and that of “O” is the same as that of “N”, and so on. Only “D” is set separately, so only 4 @keyframes are needed
You never know what the problem is and how to solve it until you try.
Ok, that’s it, the following is the code, MOE new novice practice, inadequate places also hope big guys can criticize, thank you ~
<! 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>Copy the code