css3的loadding效果

最新推荐文章于 2023-03-23 11:47:11 发布
最新推荐文章于 2023-03-23 11:47:11 发布
阅读量136 收藏
点赞数
原文链接：http://www.cnblogs.com/huntaheart/p/4026192.html
版权 
<!DOCTYPE html>
<html>
    <head>
        <title>CSS3 loading效果</title>
        <meta charset="utf-8" />
        <style type="text/css" media="screen">
            * {
                margin: 0;
                padding: 0;
            }
            #loading {
                position: absolute;
                left: 600px;
                top: 147px;
                color: #666;
            }
            #loading span{
                display: block;
                position: absolute;
                top: 32px;
                height: 10px;
                width: 10px;
                border: 1px solid #999;
                background-color: #CCC;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-duration: 2.5s;
            }
            #loading span:nth-of-type(1){
                left: 0;
                -webkit-animation-name: animationloading1;
            }
            #loading span:nth-of-type(2){
                left: 20px;
                -webkit-animation-name: animationloading2;
            }
            #loading span:nth-of-type(3){
                left: 40px;
                -webkit-animation-name: animationloading3;
            }
            #loading span:nth-of-type(4){
                left: 60px;
                -webkit-animation-name: animationloading4;
            }
            #loading span:nth-of-type(5){
                left: 80px;
                -webkit-animation-name: animationloading5;
            }
            @-webkit-keyframes animationloading1{
                0%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
                20%{
                    -webkit-transform: scale(1.5);
                    background-color: #999;
                }
                21%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
                100%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
            }
            @-webkit-keyframes animationloading2{
                0%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
                20%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
                40%{
                    -webkit-transform: scale(1.5);
                    background-color: #999;
                }
                41%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
                100%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
            }
            @-webkit-keyframes animationloading3{
                0%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
                40%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
                60%{
                    -webkit-transform: scale(1.5);
                    background-color: #999;
                }
                61%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
                100%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
            }
            @-webkit-keyframes animationloading4{
                0%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
                60%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
                80%{
                    -webkit-transform: scale(1.5);
                    background-color: #999;
                }
                81%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
                100%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
            }
            @-webkit-keyframes animationloading5{
                0%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
                80%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
                100%{
                    -webkit-transform: scale(1.5);
                    background-color: #999;
                }
            }
        </style>
    </head>
    <body>
        <div id="loading">
            <h3>正在转入<a href="http://www.baidu.com">CSS3持续一组连贯动画</a> 加载中……请稍候进入百度搜索</h3>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </body>
</html>

 

转载于:https://www.cnblogs.com/huntaheart/p/4026192.html

weixin_30697239
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
动态加载LOADDING小图标
01-16
动态加载LOADDING小图标，提供给类动态加载小图标。
CSS 实现各种 Loading 效果
猿男孩的博客
06-16 5039
CSS 实现各种 Loading 效果 效果实现： 这篇文章主要介绍了CSS 实现各种 Loading 效果附带解析过程,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下。...
css3动画loding
dream_will_true的博客
02-24 172
css3制作loading动画
css: loadding效果14种
qq_36413371的博客
09-29 449
可以看这个 链接 下载链接 1. 2. 3. 4. 5. 6. 7. 8. 9. 11. 13. 14.
vue css load,vue css3loadding插件的开发以及npm包的发布管理
weixin_29638987的博客
08-04 606
插件开发的话建议使用vue-gitment脚手架开发vue init webpack-simple vue-gitment如果提示执行cnpm install vue-cli -g 全局安装cnpm install vue-cli -g在次执行上面的命令完成之后可以看到这样的目录在src下面添加component loadding.js loadding.vueloadding.vueexport...
纯css loadding效果
weixin_33753845的博客
10-30 192
2019独角兽企业重金招聘Python工程师标准>>> ...
CSS3实现10种Loading效果
09-24
主要为大家详细介绍了CSS3实现10种Loading效果，效果实现简单新颖，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
各种css3 loading效果
10-25
各种css3写的加载，loading效果
多种css3 loading效果
06-12
纯css3实现的多种loading效果，无需js，执行效率更高更快，耗费内存更低 附件提供了五种不同的效果，个人感觉第一个效果较为经典 使用方法： 1、在head中将两个css样式引入网页中 2、将html代码拷贝...
css3实现加载loading特效小动画效果
06-12
描述： css3代码与js插件一同实现的loading效果 原理比较简单，效果也比较好看 因使用较少，本案例暂只提供观赏 这里就不解释如何使用了
css3_loadding_demo.zip
10-24
css3加载动画，浏览器兼容性已处理，欢迎下载
纯CSS3实现的8种Loading动画效果
09-25
主要介绍了纯CSS3实现的8种Loading动画效果,效果简洁、超酷、符合当前前端的流行风格,需要的朋友可以参考下
css实现loading效果
tx_xiaobai的博客
11-19 350
一、 <div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> .lo...
CSS3实现18种Loading效果
zcc的博客
03-03 2703
在网上看到一篇文章，css实现loading的效果，特此整理代码方便以后使用。 第1种效果： <div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </.
CSS3实现loading效果
赵花花的博客
03-23 912
记录使用css3实现一个loading效果
纯css实现loadding的酷炫效果
weixin_33690963的博客
03-25 607
2019独角兽企业重金招聘Python工程师标准>>> ...
纯css实现 loading（加载）
weixin_55472979的博客
11-25 640
html： <div class="container"> <span class="dots-loader hourglass">Loading…</span> </div> css： .container { width:100%; height:100%; display:block; position:fixed; top:0px; left:0px; z-index:9; background:#ffffff; }
常见两种的loading样式（css实现）
yihuoZhou的博客
05-04 9155
第一种圆形loading，效果图如下：     实现的原理是利用CSS中的animation属性，无线循环播放动画能够达到旋转效果。具体的html和css实现代码如下<!DOCTYPE html> <html> <head> <title>loading样式1</title> <style type="text/css"> .loading{
css实现一个Loading效果
WanFengZhou
03-05 492
<!-- html代码 --> <div class="load"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span&g...
css生成loading效果
最新发布
04-05
以下是一种基于CSS的loading效果的实现方式： HTML代码： ``` <div class="loading"> <div class="loading-inner"></div> </div> ``` CSS代码： ``` .loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; } .loading-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; border: 5px solid #fff; border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } ``` 这段代码将在页面中生成一个全屏的黑色半透明遮罩层，并在其中心位置添加一个旋转的loading图标。可以通过修改样式来调整loading图标的大小、颜色和旋转速度等属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值