纯css实现28种加载loading动态效果_css写一个加载资源-CSDN文库

共10个文件

png：7个

css：2个

html：1个

CSS3

loading特效

需积分: 2 171 浏览量 2023-07-12 15:07:17 上传评论收藏 777KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

CS_23019-纯css实现28种加载中效果.rar （10个子文件）

CS_23019-纯css实现28种加载中效果

img

wx.png 51KB

3.png 155KB

1.png 137KB

4.png 170KB

js.png 97KB

zfb.png 20KB

2.png 165KB

css

loaders.css 65KB

lanrenzhijia.css 2KB

index.html 8KB

<!doctype html>  <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/lanrenzhijia.css" /> <link rel="stylesheet" type="text/css" href="css/loaders.css" /> <title>28个纯css3 加载loading动画特效</title> </head> <body> <h3 style="position: absolute;top:0;left: 800px;color: #999;">原创于CSDN博主-《拄杖盲学轻声码》</h3> <main> <div class="loaders"> <div class="loader"> <div class="loader-inner ball-pulse"> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-grid-pulse"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-clip-rotate"> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-clip-rotate-pulse"> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner square-spin"> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-clip-rotate-multiple"> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-pulse-rise"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-rotate"> <div></div> </div> </div> <div class="loader"> <div class="loader-inner cube-transition"> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-zig-zag"> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-zig-zag-deflect"> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-triangle-path"> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-scale"> <div></div> </div> </div> <div class="loader"> <div class="loader-inner line-scale"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner line-scale-party"> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-scale-multiple"> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-pulse-sync"> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-beat"> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner line-scale-pulse-out"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner line-scale-pulse-out-rapid"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-scale-ripple"> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-scale-ripple-multiple"> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-spin-fade-loader"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <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 class="loader"> <div class="loader-inner triangle-skew-spin"> <div></div> </div> </div> <div class="loader"> <div class="loader-inner pacman"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-grid-beat"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner semi-circle-spin"> <div></div> </div> </div> </div> </main> <div class="dashang" style="width: 1400px;margin:20px auto;height: 200px;"> <div class="left_jinbang" style="width: 500px;height: 100%;float: left;"> <h5 style="font-size: 16px; padding-left: 10px; border-left: 3px solid #FF7F27; color: #FF7F27;"> 金榜题名区（每日23:00更新）：</h5> <h6 style="font-size: 18px;line-height: 35px;color: #A349A4;"> 客官您要是觉得对您有所帮助，赏口水钱，不管碎银几两，皆可入皇榜<strong style='color:red'>鄙人特备皇榜聊表谢意</strong>，赞助皇榜地址如下链接：</h6> <a href="http://www.baofumeng.cn/inithdd/#/rewordData" style="color:#2C7AD6 ;font-size: 20px;cursor: pointer;" target="_blank">皇榜排名区</a> </div> <div class="right_jinbang" style=" width: calc(100% - 600px);height: 100%; margin-left: 50px; float: left;"> <div class="partWx" style="width: 200px;height: 210px;margin: 10px 20px; background-color: #C8BFE7;float: right;"> <div class="img" style="width: 160px;height: 160px;margin: 10px auto;"> <img width="100%" height="100%" src="img/js.png" alt=""> </div> <div class="txt" style="width: 100%;font-size:14px;font-weight: bold;text-align: center;color: #FFF;"> 技术交流群（qq） </div> </div> <div class="partWx" style="width: 200px;height: 210px;margin: 10px 20px; background-color: #60D678;float: right;"> <div class="img" style="width: 160px;height: 160px;margin: 10px auto;"> <img width="100%" height="100%" src="img/wx.png" alt=""> </div> <div class="txt" style="width: 100%;font-size:14px;font-weight: bold;text-align: center;color: #FFF;"> 解锁皇榜（微信） </div> </div> <div class="partZfb" style="width: 200px;height: 210px;margin: 10px 20px;background-color: #3974F4;float: right;"> <div class="img" style="width: 160px;height: 160px;margin: 10px auto;"> <img width="100%" height="100%" src="img/zfb.png" alt=""> </div>

评论收藏

内容反馈