收藏的一些有意思的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 Help
http://docwiki.embarcadero.com/CodeExamples/Seattle/en/Category:Content_by_Version
Cable master（二分-求可行解）
Inhabitants of the Wonderland have decided to hold a regional programming contest. The Judging Commi ...
Linux下安装Python2.7
Linux下安装Python2.7 CentOS6.8 中默认安装了Python2.6,但是很多应用需要使用Python2.7,于是要学会如何在Linux下安装Python2.7,这里记录一下,免得以 ...
mysql如何进行以=分割的字符串的拆分
SUBSTRING_INDEX(str, delim, count) str: 要处理的字符串 delim: 分割符 count: 计数如果为正数,则从左开始数,如果为负数,则从右开始数使用示例: ...
flask+jsonp跨域前后台交互（接口初体验）
1 # -*- coding: utf-8 -*- 2 from flask import Flask, jsonify 3 import psutil, time,json 4 5 app = Fl ...
java 实现mysql数据库备份
package com.itenp.gen.action; import java.io.BufferedReader; import java.io.FileInputStream; import ...
Hyperledger Fabric源码解析
Hyperledger Fabric开源于2015年12月,截至2018年2月初有185个公司/组织成员加入.最初由IBM和DAH的工程师贡献,现在约有70名的代码贡献者,4000+代码提交,代码行数 ...
c语言学习笔记 for循环的结构
其实感觉for循环没有while循环那么直白好理解. for(i=0;i<n;i++) { dosth(); } i=0是i的初始值. i<n是循环进行的条件. i++是每次循环要做的事情 ...
几种导入osm（openstreetmap）数据的方法
一osm2pgsql+postgresql+postgis osm2pgsql——是由OpenStreetMap开发的一个命令行工具负责将OSM数据导入到基于PostgresSql的Postgis的 ...
Python基础入门-while循环示例
闲来无事! 想写一些基础的东西! 比如今天的while循环,,,,,, 很多python初学者,最开始学习python的时候,会被while循环给干蒙蔽! 那么今天,小编为大家讲解一些基础的实例,来帮 ...

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

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

随机推荐

热门专题