css实现加载特效

最新推荐文章于 2024-08-28 21:26:11 发布

蓝胖胖。

最新推荐文章于 2024-08-28 21:26:11 发布

阅读量1k

点赞数 1

分类专栏： JavaScript笔记文章标签： css3

本文链接：https://blog.csdn.net/qq_44921114/article/details/109353434

版权

该博客介绍了如何使用CSS3实现一种独特的加载特效。通过设置8个定位的白色圆圈，并赋予不同的缩放动画时间，营造出只有少数白点旋转的视觉效果。在实际代码中，每个圆圈都有相应的动画和延迟属性，从而在不改变位置的情况下实现动态加载的假象。

摘要由CSDN通过智能技术生成

效果如下：
在这里插入图片描述

思路：这个效果给人一种只有只有四五个白点在转圈的感觉。，实际上使用的是八个有定位的白色圆圈，设置好每一个的缩放动画时间，在整个加载过程中并没有发生位置的改变。
html：

<body>
		<div class="container">
			<div class="loadiing">
			<div class="container1">
				<div class="circle"></div>
				<div class="circle"></div>
				<div class="circle"></div>
				<div class="circle"></div>
			</div>
			<div class="container2">
				<div class="circle"></div>
				<div class="circle"></div>
				<div class="circle"></div>
				<div class="circle"></div>
			</div>
			</div>
			<p>loadding...</p>
		</div>
	</body>

增加样式和定位后：

在这里插入图片描述

	<style type="text/css">
	.container{
		width: 100px;
		height: 100px;
		margin: 100px auto;
		background-color: #7f7f7f;
		border-radius: 10px;
	}
	.loadiing{
		width: 40px;
		height: 40px;
		margin: 10px auto;
		position: relative;
	}
	.container1,.container2{
		width: 100%;
		height: 100%;
		position: absolute;
		margin-top: 10px;
	}
	.container2{
		transform: rotate(45deg);
		/* 如果不给container2旋转将与container1位置重叠，旋转使得小圆点分布在八个方向上 */
	}
	.container p{
		text-align: center;
		padding-top: 10px;
		width: 100%;
		color: #fff;
	}
	.circle{
		width: 10px;
		height: 10px;
		background-color: #fff;
		border-radius: 50%;
		position: absolute;/* 给每一个小圆点增加定位 */
		animation: load 1.8s both infinite;
		/* 每一个小圆圈缩放完成的时间为1.8且往复执行动画 */
	}
	.circle:nth-child(1){
		left: 0;
		top: 0;
	}
	
	.circle:nth-child(2){
		right: 0;
		top: 0;
	}
	.circle:nth-child(3){
		right: 0;
		bottom: 0;
	}
	.circle:nth-child(4){
		left: 0;
		bottom: 0;
	}

</style>`

现在给图片加上动画和延时：

		@keyframes load{
   
			0%{
   
				transform: scale

最低0.47元/天解锁文章

蓝胖胖。

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录