前端实战小案例--简单动画效果

最新推荐文章于 2023-07-11 18:54:54 发布

朽木自雕xmzd

最新推荐文章于 2023-07-11 18:54:54 发布

阅读量2.2k

点赞数 1

分类专栏：前端实战案例文章标签：前端实战案例 CSS HTML

本文链接：https://blog.csdn.net/qq_16687863/article/details/100516489

版权

前端实战案例专栏收录该内容

20 篇文章 52 订阅

订阅专栏

前端实战小案例--简单动画效果

想练习更多前端案例，请进个人主页，点击前端实战案例->传送门

觉得不错的记得点个赞?支持一下我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>