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

随机推荐

创建maven工程时报错，解决方案
解决思路:在本地库中装载maven-archetype-quickstart 1.从 http://mirrors.ibiblio.org/pub/mirrors/maven2/org/apache/ ...
subprocess模块和logging模块
主要内容: 一.subprocess模块二.logging模块 1️⃣ subprocess模块三种执行命令的方法 subprocess.run(*popenargs, input=None, ...
为什么学习python？（知乎大神的回答）
学习PHP 是因为得到一份工作学习Java 是因为他们选修了计算机科学这门课程学习python 是因为爱这门语言,因为寻求美
mysql免安装版1067错误终极解决办法|在windows平台下MySql启动时的1067错误的解决方法及反思
[windows事件查看] 我的电脑--此电脑--右键管理--计算机管理--系统工具--事件查看器--Windows日志--应用程序--找错误标志,如下图 [提示] 按部就班,可能并不能解决你的问题, ...
【bzoj1787】[Ahoi2008]Meet 紧急集合
1787: [Ahoi2008]Meet 紧急集合 Time Limit: 20 Sec Memory Limit: 162 MBSubmit: 2466 Solved: 1117[Submit] ...
前端性能分析：分析百度和sogou
先用httpwatch录制这两个网站:www.baidu.com www.sogou.com 由上图可以看到: 百度用时0.278s 发送7831B 接收36620B 13个请求搜狗 ...
2、awk的输出
1.常见的输出格式整理 awk '{print "this is " $1, $2, $1*$2, NR, NF, $NF}' file1 ###字符输出,字段输出,运算输出, ...
js加载页面使用execute_script选定加载位置
#由于js逐步加载页面,存在未显示的网页无法加载源码 from selenium import webdriver driver = webdriver.Firefox() init_element ...
HDU 3723 Delta Wave (高精度+calelan数)
题意:给定一个图,问你只能向上向下,或者平着走,有多少种方法可以走到最后一个格. 析:首先先考虑,如果没有平的情况就是calelan数了,现在有平的情况,那么就枚举呗,因为数很大,所以要用高精度. 答 ...
HackOne
使用 weight 属性实现视图的居中显示一.在开发中有时候会遇到将一个控件在父控件居中显示.但是如果你直接用margin_*来进行限制的话就可能造成对于不同的型号的手机又不同显示的格式. 所以就可 ...

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

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

随机推荐

热门专题