Css_加载样式
第一种效果：
代码如下：
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
.loading{
width: 80px;
height: 40px;
margin: 0 auto;
margin-top:100px;
}
.loading span{
display: inline-block;
width: 8px;
height: 100%;
border-radius: 4px;
background: lightgreen;
-webkit-animation: load 1.04s ease infinite;
}
@-webkit-keyframes load{
0%,100%{
height: 40px;
background: lightgreen;
}
50%{
height: 60px;
margin-top: -20px;
background: lightblue;
}
}
.loading span:nth-child(2){
-webkit-animation-delay:0.13s;
}
.loading span:nth-child(3){
-webkit-animation-delay:0.26s;
}
.loading span:nth-child(4){
-webkit-animation-delay:0.39s;
}
.loading span:nth-child(5){
-webkit-animation-delay:0.52s;
}
第二种效果：
代码如下：
<div class="loading">
<span></span>
</div>
.loading{
width: 80px;
height: 80px;
border-radius: 50%;
margin: 0 auto;
margin-top:100px;
position: relative;
border:5px solid lightgreen;
-webkit-animation: turn 2s linear infinite;
}
.loading span{
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
background: lightgreen;
position: absolute;
left: 50%;
margin-top: -15px;
margin-left: -15px;
-webkit-animation: changeBgColor 2s linear infinite;
}
@-webkit-keyframes changeBgColor{
0%{
background: lightgreen;
}
100%{
background: lightblue;
}
}
@-webkit-keyframes turn{
0%{
-webkit-transform: rotate(0deg);
border-color: lightgreen;
}
100%{
-webkit-transform: rotate(360deg);
border-color: lightblue;
}
}
第三种效果：
代码如下：
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
.loading{
width: 150px;
height: 15px;
margin: 0 auto;
margin-top:100px;
text-align: center;
}
.loading span{
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
background: lightgreen;
-webkit-animation: load 1.04s ease infinite;
}
.loading span:last-child{
margin-right: 0px;
}
@-webkit-keyframes load{
0%{
opacity: 1;
-webkit-transform: scale(1.2);
}
100%{
opacity: .2;
-webkit-transform: scale(.2);
}
}
.loading span:nth-child(1){
-webkit-animation-delay:0.13s;
}
.loading span:nth-child(2){
-webkit-animation-delay:0.26s;
}
.loading span:nth-child(3){
-webkit-animation-delay:0.39s;
}
.loading span:nth-child(4){
-webkit-animation-delay:0.52s;
}
.loading span:nth-child(5){
-webkit-animation-delay:0.65s;
}
第四种效果：
代码如下：
<div class="loading">
<span></span>
</div>
.loading{
width: 150px;
height: 8px;
border-radius: 4px;
margin: 0 auto;
margin-top:100px;
position: relative;
background: lightblue;
overflow: hidden;
}
.loading span{
display:block;
width: 100%;
height: 100%;
border-radius: 3px;
background: lightgreen;
-webkit-animation: changePosition 4s linear infinite;
}
@-webkit-keyframes changePosition{
0%{
-webkit-transform: translate(-150px);
}
50%{
-webkit-transform: translate(0);
}
100%{
-webkit-transform: translate(150px);
}
}
第五种效果：
代码如下：
<div class="loading">
<span></span>
</div>
.loading{
width: 200px;
height: 60px;
margin: 0 auto;
margin-top: 100px;
position: relative;
}
.loading span{
width: 50px;
height: 30px;
border-radius: 50%;
background: lightgreen;
position: absolute;
top: 50%;
margin-top: -15px;
overflow: hidden;
-webkit-animation: changePosition 2.08s linear infinite;
}
@-webkit-keyframes changePosition{
0%,100%{
-webkit-transform: translate(70px);
}
20%{
width: 50px;
height: 30px;
margin-top:-15px;
-webkit-transform: translate(0px);
}
30%{
width: 20px;
height: 60px;
margin-top:-30px;
-webkit-transform: translate(0px);
}
35%{
width: 50px;
height: 30px;
margin-top:-15px;
-webkit-transform: translate(5px);
background: lightblue;
}
70%{
width: 50px;
height: 30px;
margin-top:-15px;
-webkit-transform: translate(160px);
}
80%{
width: 20px;
height: 60px;
margin-top:-30px;
-webkit-transform: translate(160px);
}
85%{
width: 50px;
height: 30px;
margin-top:-15px;
-webkit-transform: translate(155px);
background: lightgreen;
}
}
第六种效果：
代码如下：
<div class="loadEffect">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
.loadEffect{
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
margin-top:100px;
}
.loadEffect span{
display: inline-block;
width: 30px;
height: 10px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
background: lightgreen;
position: absolute;
-webkit-animation: load 1.04s ease infinite;
}
@-webkit-keyframes load{
0%{
opacity: 1;
}
100%{
opacity: 0.2;
}
}
.loadEffect span:nth-child(1){
left: 0;
top: 50%;
margin-top:-5px;
-webkit-animation-delay:0.13s;
}
.loadEffect span:nth-child(2){
left: 10px;
top: 20px;
-webkit-transform: rotate(45deg);
-webkit-animation-delay:0.26s;
}
.loadEffect span:nth-child(3){
left: 50%;
top: 10px;
margin-left: -15px;
-webkit-transform: rotate(90deg);
-webkit-animation-delay:0.39s;
}
.loadEffect span:nth-child(4){
top: 20px;
right:10px;
-webkit-transform: rotate(135deg);
-webkit-animation-delay:0.52s;
}
.loadEffect span:nth-child(5){
right: 0;
top: 50%;
margin-top:-5px;
-webkit-transform: rotate(180deg);
-webkit-animation-delay:0.65s;
}
.loadEffect span:nth-child(6){
right: 10px;
bottom:20px;
-webkit-transform: rotate(225deg);
-webkit-animation-delay:0.78s;
}
.loadEffect span:nth-child(7){
bottom: 10px;
left: 50%;
margin-left: -15px;
-webkit-transform: rotate(270deg);
-webkit-animation-delay:0.91s;
}
.loadEffect span:nth-child(8){
bottom: 20px;
left: 10px;
-webkit-transform: rotate(315deg);
-webkit-animation-delay:1.04s;
}
第七种效果：
代码如下：
<div class="loadEffect">
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
</div>
.loadEffect {
width: 100px;
height: 100px;
margin: 0 auto;
margin-top:100px;
position: relative;
}
.loadEffect div{
width: 100%;
height: 100%;
position: absolute;
-webkit-animation: load 2.08s linear infinite;
}
.loadEffect div span{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: lightgreen;
position: absolute;
left: 50%;
margin-top: -10px;
margin-left: -10px;
}
@-webkit-keyframes load{
0%{
-webkit-transform: rotate(0deg);
}
10%{
-webkit-transform: rotate(45deg);
}
50%{
opacity: 1;
-webkit-transform: rotate(160deg);
}
62%{
opacity: 0;
}
65%{
opacity: 0;
-webkit-transform: rotate(200deg);
}
90%{
-webkit-transform: rotate(340deg);
}
100%{
-webkit-transform: rotate(360deg);
}
}
.loadEffect div:nth-child(1){
-webkit-animation-delay:0.2s;
}
.loadEffect div:nth-child(2){
-webkit-animation-delay:0.4s;
}
.loadEffect div:nth-child(3){
-webkit-animation-delay:0.6s;
}
.loadEffect div:nth-child(4){
-webkit-animation-delay:0.8s;
}
第八种效果：
代码如下：
<div class="loading">
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
</div>
.loading{
width: 60px;
height: 60px;
margin: 0 auto;
margin-top:100px;
position: relative;
-webkit-animation: load 3s linear infinite;
}
.loading div{
width: 100%;
height: 100%;
position: absolute;
}
.loading span{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #99CC66;
position: absolute;
left: 50%;
margin-top: -10px;
margin-left: -10px;
-webkit-animation: changeBgColor 3s ease infinite;
}
@-webkit-keyframes load{
0%{
-webkit-transform: rotate(0deg);
}
33.3%{
-webkit-transform: rotate(120deg);
}
66.6%{
-webkit-transform: rotate(240deg);
}
100%{
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes changeBgColor{
0%,100%{
background: #99CC66;
}
33.3%{
background: #FFFF66;
}
66.6%{
background: #FF6666;
}
}
.loading div:nth-child(2){
-webkit-transform: rotate(120deg);
}
.loading div:nth-child(3){
-webkit-transform: rotate(240deg);
}
.loading div:nth-child(2) span{
-webkit-animation-delay: 1s;
}
.loading div:nth-child(3) span{
-webkit-animation-delay: 2s;
}
Css_加载样式的更多相关文章
- 【WordPress】外网访问WordPress时无法加载样式表CSS
情况: 阿里云ECS服务器,用WampServer搭建的WordPress站点,服务端自身访问该站点时显示正常,但外网访问时不能加载样式表CSS的问题. 重要的参考: https://www.doub ...
- APP的六种loading加载样式，全在这...
今天这篇文章是给大家分享的loading加载的设计,文章里面会有一些实例在这分享给大家! 大多数App都要与服务器进行数据的交换,App向服务器发出数据请求,服务器接收到请求之后向App传输相应数据, ...
- 收藏的一些有意思的CSS加载样式
先看下效果 全部代码贴出,自己粘贴调试测试: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- django无法加载样式
如果运行的环境是win10,那么首先应该考虑是否是如下问题 win10中Django后台admin无法加载CSS等样式 解决: 修改win10的注册表:[win+R输入Regedit] 因为你安装的某 ...
- css3多列布局瀑布流加载样式
看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html> <html lang="en&qu ...
- easyui datagrid JS加载样式 表头乱
解决方案,找了下资料,加一个遮罩层,提升用户体验. <script type="text/javascript"> var width = document.docum ...
- jqweui 正在加载样式的用法
见下图: 代码说明: $.showLoading("加载中..."); $.ajax({ success : function(data) { $.hideLoading(); } ...
- 加载样式TTFB waiting时间长
1.谷歌浏览器64位 2.在调试网页的时候,每回修改一个,刷新时,速度很慢 3.结果很恼火.每调试一回等半天.效率低下.... 解决办法是: "在每个CSS规则的后面加一个空行". ...
- iis无法加载样式
随机推荐
- U3D刚体测试2(ForceMode,AddForce,RelativeAddForce)
摘自圣典的一段翻译: ForceAdd a continuous force to the rigidbody, using its mass.添加一个可持续力到刚体,使用它的质量.Accelerat ...
- win10 + VS2015 + EF6 + MySQL
前置配置 在下面的网址去安装最新版的 (Connector/Net http://dev.mysql.com/downloads/connector/net/#downloads) 然后安装 MySQ ...
- 微信网页获取openId
<%@ WebHandler Language="C#" Class="UserAuth" %> public class UserAuth : I ...
- web打印
实现方法 引用jquery和,jqprint到您的页面 <script language="javascript" src="jquery-1.4.4.min.js ...
- 传递给系统调用的数据区域太小。 (异常来自 HRESULT:0x8007007A)
在做结构体向字节数组转换的时候,常遇到"传递给系统调用的数据区域太小"的错误,究其原因是因为英文与汉字的编码方式不同,一个汉字等于两个字节,而一个英文字母等于1个字节.所以,对于如 ...
- Linux下指定版本编译安装LAMP
说明: 操作系统:CentOS 6.5 64位 需求: 编译安装LAMP运行环境 各软件版本如下: MySQL:mysql-5.1.73 Apache:httpd-2.2.31 PHP:php-5.2 ...
- 走进Linux之systemd启动过程
Linux系统的启动方式有点复杂,而且总是有需要优化的地方.传统的Linux系统启动过程主要由著名的init进程(也被称为SysV init启动系统)处理,而基于init的启动系统被认为有效率不足的问 ...
- Android 网格布局 计算器
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&quo ...
- NSIntger CGFloat NSNumber
NSIntger CGFloat NSNumber 1.NSIntger (long) %ld NSInteger a=; NSLog(@"----------%ld",(l ...
- 【Unity3D游戏开发】基础知识之Tags和Layers (三二)[转]
Tags和Layers分别表示是Unity引擎里面的标签和层,他们都是用来对GameObject进行标识的属性,Tags常用于单个GameObject,Layers常用于一组的GameObject.添 ...