服务器之家
您的位置： 首页 编程语言 css

css实现旋转加载动画效果

100人浏览   2024-12-14 09:36:09

纯css实现转圈加载动画，直接上代码

Html代码：

<svg class="circular" viewbox="25 25 50 50">
	<circle class="path" cx="50" cy="50" r="20" fill="none" />
</svg>


Css代码：

.circular {
	width: 100px;
	height: 100px;
	animation: rotate 2s linear infinite;
}

.path {
	stroke-dasharray: 1, 200;
	stroke-dashoffset: 0;
	stroke: #000;
	animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
	100% {
		transform: rotate(360deg);
	}
}

@keyframes dash {
	0% {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
	}

	50% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -35px;
	}

	100% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -124px;
	}
}


效果如下：


相关推荐