纯css3 加载loading动画特效

最新推荐文章于 2025-04-29 00:15:00 发布

云舜言传

最新推荐文章于 2025-04-29 00:15:00 发布

阅读量3k

点赞数 1

分类专栏：网页设计语言HTML 浏览器

本文链接：https://blog.youkuaiyun.com/u012151556/article/details/53301605

版权

本文分享了如何使用纯CSS3来创建加载loading动画，以解决高分辨率下图片加载提示模糊的问题。通过CSS3和JavaScript的结合，实现了更好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目中要实现当页面还没有加载完给用户提示正在加载的loading，本来是想做个图片提示的，但是图片如果放大电脑的分辨率就会感觉到很虚，体验效果很不好。于是就采用css3+js实现这个loading的动画效果，最终在我们前端工程师的帮助之下完成。所以记录在这里，如果感兴趣的朋友也可以看看，大家互相焦炉学习。

1、demo.html

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="./loaders.css">
<title>纯css3 加载loading动画特效</title>

</head>
<body>

<style>
body{width:100%;height:100%;margin:0;}
.fuceng{position:absolute;width:100%;height:100%;margin:0;}
.loading{margin-left: 50%; margin-top:20%;}
</style>

 <div> 
	<div class="fuceng">  
      <div class="loading">
        <div class="loader-inner line-spin-fade-loader">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
 	</div>
</body>
</html>

2、 loaders.css

最低0.47元/天解锁文章