巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+都会分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
建站专提News

CSS3完成10种Loading结果

一佰互联网站开辟设想(www.taishanly.com) 宣布日期 2020-04-21 17:23:36 阅读数: 259

用CSS3完成了几种罕见的Loading结果,固然很简略,但仍是分享一下,趁便也当是做做条记……

第1种结果:

代码以下:

XML/HTML Code复制内容到剪贴板
  1. <div class="loading">  
  2.         <span></span>  
  3.         <span></span>  
  4.         <span></span>  
  5.         <span></span>  
  6.         <span></span>  
  7. </div>  
CSS Code复制内容到剪贴板
  1. .loading{   
  2.             width80px;   
  3.             height40px;   
  4.             margin: 0 auto;   
  5.             margin-top:100px;   
  6.         }   
  7.         .loading span{   
  8.             displayinline-block;   
  9.             width8px;   
  10.             height: 100%;   
  11.             border-radius: 4px;   
  12.             background: lightgreen;   
  13.             -webkit-animation: load 1s ease infinite;   
  14.         }   
  15.         @-webkit-keyframes load{   
  16.             0%,100%{   
  17.                 height40px;   
  18.                 background: lightgreen;   
  19.             }   
  20.             50%{   
  21.                 height70px;   
  22.                 margin: -15px 0;   
  23.                 background: lightblue;   
  24.             }   
  25.         }   
  26.         .loading span:nth-child(2){   
  27.             -webkit-animation-delay:0.2s;   
  28.         }   
  29.         .loading span:nth-child(3){   
  30.             -webkit-animation-delay:0.4s;   
  31.         }   
  32.         .loading span:nth-child(4){   
  33.             -webkit-animation-delay:0.6s;   
  34.         }   
  35.         .loading span:nth-child(5){   
  36.             -webkit-animation-delay:0.8s;   
  37.         }   
  38.   

第2种结果:

代码以下:

XML/HTML Code复制内容到剪贴板
  1. <div class="loading">  
  2.         <span></span>  
  3. </div>  
  4.   
CSS Code复制内容到剪贴板
  1. .loading{   
  2.             width150px;   
  3.             height4px;   
  4.             border-radius: 2px;   
  5.             margin: 0 auto;   
  6.             margin-top:100px;   
  7.             positionrelative;   
  8.             background: lightgreen;   
  9.             -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;   
  10.         }   
  11.         .loading span{   
  12.             displayinline-block;   
  13.             width16px;   
  14.             height16px;   
  15.             border-radius: 50%;   
  16.             background: lightgreen;   
  17.             positionabsolute;   
  18.             margin-top: -7px;   
  19.             margin-left:-8px;   
  20.             -webkit-animation: changePosition 1.04s ease-in infinite alternate;   
  21.         }   
  22.         @-webkit-keyframes changeBgColor{   
  23.             0%{   
  24.                 background: lightgreen;   
  25.             }   
  26.             100%{   
  27.                 background: lightblue;   
  28.             }   
  29.         }   
  30.         @-webkit-keyframes changePosition{   
  31.             0%{   
  32.                 background: lightgreen;   
  33.             }   
  34.             100%{   
  35.                 margin-left142px;   
  36.                 background: lightblue;   
  37.             }   
  38.         }   
  39.   

第3-5种结果:

代码以下:

XML/HTML Code复制内容到剪贴板
  1. <div class="loading">  
  2.         <span></span>  
  3.         <span></span>  
  4.         <span></span>  
  5.         <span></span>  
  6.         <span></span>  
  7. </div>   

第3-5种结果的css款式别离为:

CSS Code复制内容到剪贴板
  1. .loading{   
  2.             width150px;   
  3.             height15px;   
  4.             margin: 0 auto;   
  5.             positionrelative;   
  6.             margin-top:100px;   
  7.         }   
  8.         .loading span{   
  9.             positionabsolute;   
  10.             width15px;   
  11.             height: 100%;   
  12.             border-radius: 50%;   
  13.             background: lightgreen;   
  14.             -webkit-animation: load 1.04s ease-in infinite alternate;   
  15.         }   
  16.         @-webkit-keyframes load{   
  17.             0%{   
  18.                 opacity: 1;   
  19.                 -webkit-transform: translate(0px);   
  20.             }   
  21.             100%{   
  22.                 opacity: 0.2;   
  23.                 -webkit-transform: translate(150px);   
  24.             }   
  25.         }   
  26.         .loading span:nth-child(1){   
  27.             -webkit-animation-delay:0.13s;   
  28.         }   
  29.         .loading span:nth-child(2){   
  30.             -webkit-animation-delay:0.26s;   
  31.         }   
  32.         .loading span:nth-child(3){   
  33.             -webkit-animation-delay:0.39s;   
  34.         }   
  35.         .loading span:nth-child(4){   
  36.             -webkit-animation-delay:0.52s;   
  37.         }   
  38.         .loading span:nth-child(5){   
  39.             -webkit-animation-delay:0.65s;   
  40.         }  

第6-8种结果:

代码以下:

XML/HTML Code复制内容到剪贴板
  1. <div class="loading">  
  2.         <span></span>  
  3.         <span></span>  
  4.         <span></span>  
  5.         <span></span>  
  6.         <span></span>  
  7. </div>  

第6-8种结果的css款式别离为:

CSS Code复制内容到剪贴板
  1. .loading{   
  2.             width150px;   
  3.             height15px;   
  4.             margin: 0 auto;   
  5.             margin-top:100px;   
  6.             text-aligncenter;   
  7.         }   
  8.         .loading span{   
  9.             displayinline-block;   
  10.             width15px;   
  11.             height: 100%;   
  12.             margin-right5px;   
  13.             background: lightgreen;   
  14.             -webkit-animation: load 1.04s ease infinite;   
  15.         }   
  16.         .loading span:last-child{   
  17.             margin-right0px;    
  18.         }   
  19.         @-webkit-keyframes load{   
  20.             0%{   
  21.                 opacity: 1;   
  22.             }   
  23.             100%{   
  24.                 opacity: 0;   
  25.             }   
  26.         }   
  27.         .loading span:nth-child(1){   
  28.             -webkit-animation-delay:0.13s;   
  29.         }   
  30.         .loading span:nth-child(2){   
  31.             -webkit-animation-delay:0.26s;   
  32.         }   
  33.         .loading span:nth-child(3){   
  34.             -webkit-animation-delay:0.39s;   
  35.         }   
  36.         .loading span:nth-child(4){   
  37.             -webkit-animation-delay:0.52s;   
  38.         }   
  39.         .loading span:nth-child(5){   
  40.             -webkit-animation-delay:0.65s;   
  41.         }  

第9-10种结果:

代码以下:

XML/HTML Code复制内容到剪贴板
  1. <div class="loadEffect">  
  2.         <span></span>  
  3.         <span></span>  
  4.         <span></span>  
  5.         <span></span>  
  6.         <span></span>  
  7.         <span></span>  
  8.         <span></span>  
  9.         <span></span>  
  10. </div>  

CSS款式别离为:

CSS Code复制内容到剪贴板
  1. .loadEffect{   
  2.             width100px;   
  3.             height100px;   
  4.             positionrelative;   
  5.             margin: 0 auto;   
  6.             margin-top:100px;   
  7.         }   
  8.         .loadEffect span{   
  9.             displayinline-block;   
  10.             width16px;   
  11.             height16px;   
  12.             border-radius: 50%;   
  13.             background: lightgreen;   
  14.             positionabsolute;   
  15.             -webkit-animation: load 1.04s ease infinite;   
  16.         }   
  17.         @-webkit-keyframes load{   
  18.             0%{   
  19.                 opacity: 1;   
  20.             }   
  21.             100%{   
  22.                 opacity: 0.2;   
  23.             }   
  24.         }   
  25.         .loadEffect span:nth-child(1){   
  26.             left: 0;   
  27.             top: 50%;   
  28.             margin-top:-8px;   
  29.             -webkit-animation-delay:0.13s;   
  30.         }   
  31.         .loadEffect span:nth-child(2){   
  32.             left14px;   
  33.             top14px;   
  34.             -webkit-animation-delay:0.26s;   
  35.         }   
  36.         .loadEffect span:nth-child(3){   
  37.             left: 50%;   
  38.             top: 0;   
  39.             margin-left: -8px;   
  40.             -webkit-animation-delay:0.39s;   
  41.         }   
  42.         .loadEffect span:nth-child(4){   
  43.             top14px;   
  44.             rightright:14px;   
  45.             -webkit-animation-delay:0.52s;   
  46.         }   
  47.         .loadEffect span:nth-child(5){   
  48.             rightright: 0;   
  49.             top: 50%;   
  50.             margin-top:-8px;   
  51.             -webkit-animation-delay:0.65s;   
  52.         }   
  53.         .loadEffect span:nth-child(6){   
  54.             rightright14px;   
  55.             bottombottom:14px;   
  56.             -webkit-animation-delay:0.78s;   
  57.         }   
  58.         .loadEffect span:nth-child(7){   
  59.             bottombottom: 0;   
  60.             left: 50%;   
  61.             margin-left: -8px;   
  62.             -webkit-animation-delay:0.91s;   
  63.         }   
  64.         .loadEffect span:nth-child(8){   
  65.             bottombottom14px;   
  66.             left14px;   
  67.             -webkit-animation-delay:1.04s;   
  68.         }  

PS:CSS款式代码实在良多反复,首要便是动画不一样,但为了便利今后间接拿来用,就先不清算了。

以上便是本文的全数内容,但愿对大师的进修有所赞助,也但愿大师多多撑持网页设想。

本文链接:http://www.cnblogs.com/jr1993/p/4622039.html

一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。更多资讯:tags标签

相干消息more

05
04月
享物说:享物说开创人正站在“风口”上,它可否

简介:“我和享物说的开创人孙硕熟悉良多年了,这是我自动提出要帮享物说做一次直播。”作为“创业教父”的徐小平在节目中流露了与孙硕的渊源——早前... >>概况

01
04月
在FastReport.Net中利用查问编辑

简介:FastReport.Net为其报表设想器供给了自界说功效,在本文中,将先容若何利用Active Query Builder替代内置S... >>概况

03
05月
最罕见的的优化手段有哪些?汇总罕见的SEO快

SEO优化市场一向都是鱼龙稠浊,各种优化手段层见叠出,但不管甚么样的手段,都离开不了最底子的以收录排名人量为导向的优化体例,那末在优化的进程... >>概况

20
11月
做网站经营哪些方面要洞若观火

网站是每家企业必备的工具,互联网时期须要用网站来完成本身的目标。而网站不是上线就能够,做好网站经营,能力有用进步红利机率。那末做网站经营哪些... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站