收藏的一些有意思的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 ...

随机推荐

C++数组与指针回顾总结
//数组名是常量指针, //a+1 是相对数组起始地址偏移了sizeof(int)字节 //&a+1 是相对于数组起始地址偏移了sizeof(a)字节 , , , }; cout <&l ...
spring mvc default-servlet mvc:resources mvc:default-servlet-handler区别
mvc:default-servlet-handler其实就是default-servlet 交由web容器自己处理 mvc:resources spring来处理没有被映射的url web容器来处 ...
sklearn 中 make_blobs模块
# 生成用于聚类的各向同性高斯blobsklearn.datasets.make_blobs(n_samples = 100,n_features = 2,center = 3,cluster_std ...
JavaScript 18岁生日快乐
12月4日是JS的18岁生日,18年前这个日子JavaScript由Netscape和Sun联合宣布推出.那个星期,Ruby也将推出其第一个版本. 今天Netscape和Sun都已经不在了,但是JS还 ...
MapReduce和YARN框架
MapReduce组件如图
Write your first jQuery plugin
本文固定链接: http://www.jquery.org.cn/archives/380 一般来说,jQuery插件的开发分为两种:一种是挂在jQuery命名空间下的全局函数,也可称为静态方法:另一 ...
带你剖析WebGis的世界奥秘----点和线的世界（转）
带你剖析WebGis的世界奥秘----点和线的世界转:https://zxhtom.oschina.io/zxh/20160813.html 编程 java 2016/08/13 0留言, 0 ...
Linux awk&sed
awk AWK是强大的文本处理工具,擅长对日志文件迚行快速分析. 它丌仅用亍 Linux ,也是任何环境中现有的功能最强大的数据处理引擎之一. 名称得自亍它的发明者 Alfred Aho .Pet ...
PHP 5.5环境配置
php5.5 + apache2.4 安装配置 1 2 3 4 5 6 7 分步阅读 php5.5 做了大量的更新,在与apache搭配的时候如何选择也很有讲究,这里我们以64位 php5.6 和 A ...
171. Excel Sheet Column Number Excel表格的字母转成数字
［抄题］: Given a column title as appear in an Excel sheet, return its corresponding column number. For ...

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

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

随机推荐

热门专题