手写一个loading动画

最新推荐文章于 2025-05-21 15:16:41 发布

空&白

最新推荐文章于 2025-05-21 15:16:41 发布

阅读量218

点赞数 1

分类专栏： css 文章标签：前端 css

本文链接：https://blog.youkuaiyun.com/qq_32707555/article/details/145931354

版权

css 专栏收录该内容

19 篇文章

订阅专栏

在这里插入图片描述
效果描述：第一个方块1s内旋转90度静止，第二个方块1s内旋转90度静止，第三个方块1s内旋转90度静止，第一个方块1s内旋转90度静止…重复动作。
相关参数：animation-duration、animation-iteration-count、transform: rotate(90deg)
思路：完成整个动作需要4s，其中第1秒在执行动作，剩下3s为静止。

<div class="content-div">
	<div class="divs-1 divs-items"></div>
	<div class="divs-2 divs-items"></div>
	<div class="divs-3 divs-items"></div>
</div>

.divs-items{
	width: 16px;
	height: 16px;
	border-radius: 4px;
	margin: 0 10px;
	animation-name: example1;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}
.divs-1{
	background: linear-gradient( 180deg, #FF8279 0%, #FF584C 100%);
}
.divs-2{
	background: linear-gradient( 180deg, #FFB96E 0%, #FFA136 100%);
	animation-delay:1s;
}
.divs-3{
	background: linear-gradient( 180deg, #91E59A 0%, #66DE77 100%);
	animation-delay:2s;
}
@keyframes example1 {
	0% { transform: rotate(0deg); }  
	25% { transform: rotate(90deg); }  
	100% { transform: rotate(90deg); } 
}