前端实战小案例--简单动画效果
想练习更多前端案例，请进个人主页，点击前端实战案例->传送门
觉得不错的记得点个赞?支持一下我0.0！谢谢了！
效果图：（好吧，我承认这个有点简单了0.0）
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单动画效果</title>
<style>
/* 这个案例很简单，就不懈注释了0.0 */
html,body{
margin: 0;
padding: 0;
}
.loading-screen{
width: 100%;
height: 100vh;
background-color: #7bed9f;
z-index: 9999;
display: flex;
align-items: center;
}
.loading-screen::before{
content: "";
position: absolute;
left: 20%;
width: 6rem;
height: 6rem;
background-color: #ffa502;
border-radius: 1.5rem;
transform: translateX(-50%) rotate(0);
animation: loading 4s infinite linear;
}
@keyframes loading{
50%{
left: 80%;
}
to{
transform: translateX(-50%) rotate(1440deg);
}
}
</style>
</head>
<body>
<div class="loading-screen"></div>
</body>
</html>
![龙珠训练营task04[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)