CSS绘制加载项

最新推荐文章于 2024-07-16 15:32:05 发布

唯一昵称真难

最新推荐文章于 2024-07-16 15:32:05 发布

阅读量191

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_26440803/article/details/82980864

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了一个简单的HTML加载动画实现方式，使用HTML和CSS创建一个旋转的圆形加载图标。通过CSS的keyframes动画属性，实现了加载图标的旋转效果，同时利用box-shadow和border-radius属性制作出平滑的圆形边框。

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

HTML主体结构

<body>
	<div class="spinner">
		<i></i>
	</div>
</body>

CSS样式

.spinner{
		    margin: 100px auto;
			border-radius: 50%;
			font-size: 50px;
			width: 1em;
			height: 1em;
			border-radius: 50%;
			box-shadow: inset 0 0 0 .1em rgba(58, 168, 237, .2);
		}

		.spinner i{
			position: absolute;
			clip:rect(0,1em,1em,.5em);
			width: 1em;
			height: 1em;
			animation: spinner-circle-clipper 1s ease-in-out infinite;
		}
	
		
		.spinner i:after{
			position: absolute;
		    clip: rect(0, 1em, 1em, .5em);
			width: 1em;
			height: 1em;
			content: '';
			animation: spinner-circle 1s ease-in-out infinite;
			border-radius: 50%;
		    box-shadow: inset 0 0 0 .1em #3aa8ed;
		}

		@keyframes spinner-circle-clipper{
			0% {
				transform: rotate(0deg);
			}
			100%{
				transform: rotate(180deg);
			}
		}
		

		@keyframes spinner-circle{
			0% {
				transform: rotate(-180deg);
			}
			100%{
				transform: rotate(180deg);
			}
		}