【css酷炫效果】纯CSS实现无限旋转加载动画

冰夏之夜影

已于 2025-03-17 15:20:05 修改

阅读量365

点赞数 1

CC 4.0 BY-SA版权

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

于 2025-03-17 11:35:13 首次发布

本文链接：https://blog.csdn.net/u011561335/article/details/146310914

web前端专栏收录该内容

37 篇文章

订阅专栏

【css酷炫效果】纯CSS实现无限旋转加载动画

缘
创作背景
html结构
css 核心代码
完整代码
效果图

想直接下载代码的，链接在这里：点击下载

缘

创作随缘，不定时更新。

创作背景

刚看到csdn出活动了，赶时间，直接上代码。

html结构

<div class="loader"></div>

css 核心代码

.loader {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

完整代码

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
    <div style='text-align:center;margin-top:50px;'>
		<img  class="loader" src='b.png' />
	</div>
	
</body>
</html>