先看下效果

全部代码贴出，自己粘贴调试测试：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>css加载样式</title>

 </head>

 <style>

 /*效果一*/

 .spinner9 { margin: 100px auto; width: 90px; height: 60px; text-align: center; font-size: 10px; } .spinner9 > div {

   background-color: #67CF22;

   height: 100%;

   width: 6px;

   display: inline-block;

   -webkit-animation: stretchdelay 1.2s infinite ease-in-out;

   animation: stretchdelay 1.2s infinite ease-in-out;

 }

 .spinner9 .rect2 {

   -webkit-animation-delay: -1.1s;

   animation-delay: -1.1s;

 }

 .spinner9 .rect3 {

   -webkit-animation-delay: -1.0s;

   animation-delay: -1.0s;

 }

 .spinner9 .rect4 {

   -webkit-animation-delay: -0.9s;

   animation-delay: -0.9s;

 }

 .spinner9 .rect5 {

   -webkit-animation-delay: -0.8s;

   animation-delay: -0.8s;

 }

 @-webkit-keyframes stretchdelay {

   0%, 40%, 100% { -webkit-transform: scaleY(0.4) }

   20% { -webkit-transform: scaleY(1.0) }

 }

 @keyframes stretchdelay {

   0%, 40%, 100% {

     transform: scaleY(0.4);

     -webkit-transform: scaleY(0.4);

   }  20% {

     transform: scaleY(1.0);

     -webkit-transform: scaleY(1.0);

   }

 }

 /*效果二*/

 .spinner1 { width: 60px; height: 60px; background-color: #67CF22; margin: 100px auto; -webkit-animation: rotateplane 1.2s infinite ease-in-out; animation: rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } } @keyframes rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }

 /*效果三*/

 .spinner2 { width: 60px; height: 60px; background: none; position: relative; margin: 100px auto; } .double-bounce1, .double-bounce2 { width: 100%; height: 100%; border-radius: 50%; background-color: #67CF22; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: bounce 2.0s infinite ease-in-out; animation: bounce 2.0s infinite ease-in-out; } .double-bounce2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } }

 /*效果四*/

 .spinner3 { margin: 100px auto; width: 32px; height: 32px; position: relative; } .cube1, .cube2 { background-color: #67CF22; width: 30px; height: 30px; position: absolute; top: 0; left: 0; -webkit-animation: cubemove 1.8s infinite ease-in-out; animation: cubemove 1.8s infinite ease-in-out; } .cube2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } @-webkit-keyframes cubemove { 25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) } 50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) } 75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) } 100% { -webkit-transform: rotate(-360deg) } } @keyframes cubemove { 25% { transform: translateX(42px) rotate(-90deg) scale(0.5); -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); } 50% { transform: translateX(42px) translateY(42px) rotate(-179deg); -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); } 50.1% { transform: translateX(42px) translateY(42px) rotate(-180deg); -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); } 75% { transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); } 100% { transform: rotate(-360deg); -webkit-transform: rotate(-360deg); } }

 /*效果五*/

 .spinner5 { margin: 100px auto; width: 90px; height: 90px; position: relative; text-align: center; -webkit-animation: rotate 2.0s infinite linear; animation: rotate 2.0s infinite linear; } .dot1, .dot2 { width: 60%; height: 60%; display: inline-block; position: absolute; top: 0; background-color: #67CF22; border-radius: 100%; -webkit-animation: bounce 2.0s infinite ease-in-out; animation: bounce 2.0s infinite ease-in-out; } .dot2 { top: auto; bottom: 0px; -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }} @keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }} @-webkit-keyframes bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } }

 /*效果六*/

 .spinner6 { margin: 100px auto 0; width: 150px; text-align: center; } .spinner6 > div {

   width: 30px;

   height: 30px;

   background-color: #67CF22;

   border-radius: 100%;

   display: inline-block;

   -webkit-animation: bouncedelay 1.4s infinite ease-in-out;

   animation: bouncedelay 1.4s infinite ease-in-out;

   /* Prevent first frame from flickering when animation starts */

   -webkit-animation-fill-mode: both;

   animation-fill-mode: both;

 }

 .spinner6 .bounce1 {

   -webkit-animation-delay: -0.32s;

   animation-delay: -0.32s;

 }

 .spinner6 .bounce2 {

   -webkit-animation-delay: -0.16s;

   animation-delay: -0.16s;

 }

 @-webkit-keyframes bouncedelay {

   0%, 80%, 100% { -webkit-transform: scale(0.0) }

   40% { -webkit-transform: scale(1.0) }

 }

 @keyframes bouncedelay {

   0%, 80%, 100% {

     transform: scale(0.0);

     -webkit-transform: scale(0.0);

   } 40% {

     transform: scale(1.0);

     -webkit-transform: scale(1.0);

   }

 }

 /*效果七*/

 .spinner { width: 90px; height: 90px; margin: 100px auto; background-color: #67CF22; border-radius: 100%; -webkit-animation: scaleout 1.0s infinite ease-in-out; animation: scaleout 1.0s infinite ease-in-out; } @-webkit-keyframes scaleout { 0% { -webkit-transform: scale(0.0) } 100% { -webkit-transform: scale(1.0); opacity: 0; } } @keyframes scaleout { 0% { transform: scale(0.0); -webkit-transform: scale(0.0); } 100% { transform: scale(1.0); -webkit-transform: scale(1.0); opacity: 0; } }

 /*效果八*/

 .spinner8 { margin: 100px auto; width: 60px; height: 60px; position: relative; } .container1 > div, .container2 > div, .container3 > div {

   width: 16px;

   height: 16px;

   background-color: #67CF22;

   border-radius: 100%;

   position: absolute;

   -webkit-animation: bouncedelay 1.2s infinite ease-in-out;

   animation: bouncedelay 1.2s infinite ease-in-out;

   /* Prevent first frame from flickering when animation starts */

   -webkit-animation-fill-mode: both;

   animation-fill-mode: both;

 }

 .spinner8 .spinner-container {

   position: absolute;

   width: 100%;

   height: 100%;

 }

 .container2 {

   -webkit-transform: rotateZ(45deg);

   transform: rotateZ(45deg);

 }

 .container3 {

   -webkit-transform: rotateZ(90deg);

   transform: rotateZ(90deg);

 }

 .circle1 { top: 0; left: 0; }

 .circle2 { top: 0; right: 0; }

 .circle3 { right: 0; bottom: 0; }

 .circle4 { left: 0; bottom: 0; }

 .container2 .circle1 {

   -webkit-animation-delay: -1.1s;

   animation-delay: -1.1s;

 }

 .container3 .circle1 {

   -webkit-animation-delay: -1.0s;

   animation-delay: -1.0s;

 }

 .container1 .circle2 {

   -webkit-animation-delay: -0.9s;

   animation-delay: -0.9s;

 }

 .container2 .circle2 {

   -webkit-animation-delay: -0.8s;

   animation-delay: -0.8s;

 }

 .container3 .circle2 {

   -webkit-animation-delay: -0.7s;

   animation-delay: -0.7s;

 }

 .container1 .circle3 {

   -webkit-animation-delay: -0.6s;

   animation-delay: -0.6s;

 }

 .container2 .circle3 {

   -webkit-animation-delay: -0.5s;

   animation-delay: -0.5s;

 }

 .container3 .circle3 {

   -webkit-animation-delay: -0.4s;

   animation-delay: -0.4s;

 }

 .container1 .circle4 {

   -webkit-animation-delay: -0.3s;

   animation-delay: -0.3s;

 }

 .container2 .circle4 {

   -webkit-animation-delay: -0.2s;

   animation-delay: -0.2s;

 }

 .container3 .circle4 {

   -webkit-animation-delay: -0.1s;

   animation-delay: -0.1s;

 }

 @-webkit-keyframes bouncedelay {

   0%, 80%, 100% { -webkit-transform: scale(0.0) }

   40% { -webkit-transform: scale(1.0) }

 }

 @keyframes bouncedelay {

   0%, 80%, 100% {

     transform: scale(0.0);

     -webkit-transform: scale(0.0);

   } 40% {

     transform: scale(1.0);

     -webkit-transform: scale(1.0);

   }

 }

 </style>

 <body>

 <!-- 效果一 -->

 <div class="spinner9">

     <div class="rect1">

         &nbsp;

     </div>

     <div class="rect2">

         &nbsp;

     </div>

     <div class="rect3">

         &nbsp;

     </div>

     <div class="rect4">

         &nbsp;

     </div>

     <div class="rect5">

         &nbsp;

     </div>

 </div>

 <!-- 效果二 -->

 <div class="spinner1"></div>

 <!-- 效果三 -->

 <div class="spinner2">

     <div class="double-bounce1">

         &nbsp;

     </div>

     <div class="double-bounce2">

         &nbsp;

     </div>

 </div>

 <!-- 效果四 -->

 <div class="spinner3">

     <div class="cube1">

         &nbsp;

     </div>

     <div class="cube2">

         &nbsp;

     </div>

 </div>

 <!-- 效果五 -->

 <div class="spinner5">

     <div class="dot1">

         &nbsp;

     </div>

     <div class="dot2">

         &nbsp;

     </div>

 </div>

 <!-- 效果六 -->

 <div class="spinner6">

     <div class="bounce1">

         &nbsp;

     </div>

     <div class="bounce2">

         &nbsp;

     </div>

     <div class="bounce3">

         &nbsp;

     </div>

 </div>

 <!-- 效果七 -->

 <div class="spinner">

     &nbsp;

 </div>

 <!-- 效果八 -->

 <div class="spinner8">

     <div class="spinner-container container1">

         <div class="circle1">

             &nbsp;

         </div>

         <div class="circle2">

             &nbsp;

         </div>

         <div class="circle3">

             &nbsp;

         </div>

         <div class="circle4">

             &nbsp;

         </div>

     </div>

     <div class="spinner-container container2">

         <div class="circle1">

             &nbsp;

         </div>

         <div class="circle2">

             &nbsp;

         </div>

         <div class="circle3">

             &nbsp;

         </div>

         <div class="circle4">

             &nbsp;

         </div>

     </div>

     <div class="spinner-container container3">

         <div class="circle1">

             &nbsp;

         </div>

         <div class="circle2">

             &nbsp;

         </div>

         <div class="circle3">

             &nbsp;

         </div>

         <div class="circle4">

             &nbsp;

         </div>

     </div>

 </div>

 </body>

 </html>

收藏的一些有意思的CSS加载样式的更多相关文章

  1. css加载优化

    <head> <script> // https://github.com/filamentgroup/loadCSS !function(e){"use stric ...

  2. 为网格布局图片打造的超炫 CSS 加载动画

    今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...

  3. 炫！一组单元素实现的 CSS 加载进度提示效果

    之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...

  4. CSS 加载新方式

    Chrome 浏览器有意改变<link rel="stylesheet">的加载方式,当其出现在<body>中时,这一变化将更加明显.笔者决定在本文中进行详 ...

  5. css加载会造成阻塞吗？

    终于考试完了,今天突然想起来前阵子找实习的时候,今日头条面试官问我,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?所以,接下来我就来对css加载对DOM树的解析和渲染 ...

  6. css加载会造成阻塞吗

    本文由云+社区发表 作者:嘿嘿嘿 可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?接下来,我就来对css加载对DOM树的解析和渲染的影响做一个测试. 为 ...

  7. css加载字体跨域问题

    刚才碰到一个css加载字体跨域问题,记录一下.站点的动态请求与静态文件请求是不同的域名的.站点的域名为 www.domain.com,而静态文件的域名为 st.domain.com.问题:页面中加载c ...

  8. php js css加载合并函数 宋正河整理

    <?php //php js css加载合并函数 宋正河整理 //转载请注明出处 define('COMBINE_JS',true); define('COMBINE_CSS',true);   ...

  9. 【WordPress】外网访问WordPress时无法加载样式表CSS

    情况: 阿里云ECS服务器,用WampServer搭建的WordPress站点,服务端自身访问该站点时显示正常,但外网访问时不能加载样式表CSS的问题. 重要的参考: https://www.doub ...

随机推荐

  1. 每天一个Linux命令 - 【find】

    命令:find 用途:查找文件并执行指令的操作 [语法]:find [路径] [选项] [参数] [功能介绍]:find命令在指定的目录下查找文件.find命令还能够对查找到的文件执行的指定的操作,通 ...

  2. Hadoop IO 特性详解（2）

    (本文引用了microheart,ggjucheng的一些资料,在此感谢.charles觉得知识无价,开源共享无价) 这一次我们接着分析文件IO校验的相关代码,看看最底层是如何实现这种大数据集的文件校 ...

  3. uboot重定位代码分析（转）

    概述 重定位(relocate)代码将BootLoader自身由Flash复制到SDRAM,以便跳转到SDRAM执行.之所以需要进行重定位是因为在Flash中执行速度比较慢,而系统复位后总是从0x00 ...

  4. 并发之AbstractQueuedLongSynchronize----AQS

    一概述 谈论到并发,不得不谈论锁,而谈论到锁而言,又离不开ReentrantLock.ReentrantLock是锁锁的一种实现方式,对于锁而言,我们这里就需要讨论到AQS,即上面的AbstractQ ...

  5. 1-5 构建官方example-Windows平台

    https://github.com/facebook/react-native https://github.com/facebook/react-native.git  https://githu ...

  6. 一个jquery在不同浏览器下的兼容性问题。

    <div id ='pdiv' style='visibility:hidden;'> <div id='cdiv'>子元素</div> </div> ...

  7. swfupload上传文件数量限制之setStats()

    使用swfupload仿赶集的图片上传 SWFUpload是一个基于flash与javascript的客户端文件上传组件. handlers.js文件 完成文件入列队(fileQueued) → 完成 ...

  8. npm link和react native的问题

    问题说明: 需要自己开发一个ReactNative插件,这个插件在独立git仓库,那么怎么把这个插件安装到主项目的依赖里,并且方便对插件的修改调试 方案一: 把插件发布到npm仓库,每次主项目通过np ...

  9. win10手动开启wifi

    win+R键,输入cmd,以管理员身份运行,输入netsh wlan set hostednetwork mode=allow ssid=wifi key=wifimima123回车 解释一下: ss ...

  10. pip镜像源配置

    #配置文件路径:%HOME%\pip\pip.ini,不存在新建即可 #在 Windows 2000 以上版本里,%HOME% 目录指的是系统盘下的“\Documents and Settings\你 ...