收藏的一些有意思的CSS加载样式

先看下效果

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

 <!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加载样式的更多相关文章

css加载优化
<head> <script> // https://github.com/filamentgroup/loadCSS !function(e){"use stric ...
为网格布局图片打造的超炫 CSS 加载动画
今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...
炫！一组单元素实现的 CSS 加载进度提示效果
之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...
CSS 加载新方式
Chrome 浏览器有意改变<link rel="stylesheet">的加载方式,当其出现在<body>中时,这一变化将更加明显.笔者决定在本文中进行详 ...
css加载会造成阻塞吗？
终于考试完了,今天突然想起来前阵子找实习的时候,今日头条面试官问我,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?所以,接下来我就来对css加载对DOM树的解析和渲染 ...
css加载会造成阻塞吗
本文由云+社区发表作者:嘿嘿嘿可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?接下来,我就来对css加载对DOM树的解析和渲染的影响做一个测试. 为 ...
css加载字体跨域问题
刚才碰到一个css加载字体跨域问题,记录一下.站点的动态请求与静态文件请求是不同的域名的.站点的域名为 www.domain.com,而静态文件的域名为 st.domain.com.问题:页面中加载c ...
php js css加载合并函数宋正河整理
<?php //php js css加载合并函数宋正河整理 //转载请注明出处 define('COMBINE_JS',true); define('COMBINE_CSS',true); ...
【WordPress】外网访问WordPress时无法加载样式表CSS
情况: 阿里云ECS服务器,用WampServer搭建的WordPress站点,服务端自身访问该站点时显示正常,但外网访问时不能加载样式表CSS的问题. 重要的参考: https://www.doub ...

随机推荐

delphi 手电筒
Self.CameraComponent1.TorchMode := TTorchMode.ModeOn;
vue中使用markdown富文本，并在html页面中展示
想给自己的后台增加一个markdown编辑器,下面记录下引用的步骤引入组件mavon-editor 官网地址:https://github.com/hinesboy/mavonEditor // 插 ...
asp:GridView控件的使用
使用asp:GridView显示一个统计的表格 cs样式: <style> table.gridview_m { border-colla ...
string的深入理解
本文只是个人总结见解,勿喷首先肯定的是string是引用类型 string s_a = "yhc"; string s_b = s_a; if(s_a.Equals(s_b)) ...
MySQL中TRUNCATE和ROUND函数的用法
一.TRUNCATE(expr, int_expr)用法 TRUNCATE函数将expr按照int_expr长度在小数点后按照位数直接进行截取. 实例: ); 输出结果:200.1256 二.ROUN ...
OK6410之tftp下载内核，nfs…
原文地址:OK6410之tftp下载内核,nfs挂载文件系统全过程详解[转]作者:千山我独行由于工作的平台也是嵌入式,差不多的平台,所以一直就没有把自己买过来的ok6410板子好好玩玩.以前一直都是 ...
day63-webservice 01.cxf介绍
CXF功能就比较强了.CXF支持soap1.2.CXF和Spring整合的非常密切.它的配置文件基本就是Spring的配置文件了.CXF是要部署在服务器才能用的.CXF得放到Web容器里面去发布.CX ...
jquery on事件在IE8下失效的一种情况，及解决方法/bootstrap空间绑定控件事件不好用
同事在复制bootstrap中的select控件之后,发现用$('.selectpicker').selectpicker();刷新下拉框控件不好使,后来发现是用原生js克隆的方法obj.cloneN ...
【总结整理】面试pm常见的问题---摘自《人人都是产品经理》
求职路上,“怼”来“怼”去的面试问题人人都是产品经理社区发布于 2018-10-29 19:53:06 举报阅读数:1418 在求职路上,面对那些被“怼”到过的面试问题,应该如何处理? 一个 ...
使用RVM更新Ruby 版本
http://rvm.io/rvm/install Install RVM (development version): \curl -sSL https://get.rvm.io | bash Wi ...

收藏的一些有意思的CSS加载样式

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

随机推荐

热门专题