利用css3制作的几个loading图
先看图，多数是从别人那里看的效果直接仿的，先开随笔，有了创意继续加
其实3个之后，脑子里立刻有个第四个的制作思路，无外乎是利用border或者块元素变形，然后构思好接下来的行为，写起来也非常简单，5个一共用了半个小时左右，缺的还是思路啊
代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>仅在chrome下正常显示</title>
<style>
*{ margin:0; padding:0;}
.css_content{
width:300px; height:300px; float:left; display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; border:1px solid #ccc;
} /* NO.1 */
.loading1{
width:100px;
height:100px;
margin:50px;
border:10px solid #ccc;
border-left-color:#000;
border-radius:50%;
-webkit-animation: loading1 1s linear infinite;
}
@-webkit-keyframes loading1{
to { -webkit-transform:rotate(1turn)};
} /* NO.2 */
.loading2{ width:150px; height:50px; text-align:center;} .loading2 span{
display:inline-block;
width:6px;
height:100%;
background:green;
-webkit-animation: loading2 1.2s infinite ease-in-out ;
}
/* 下面的样式，如果不加上.loading2 则不生效 */
.loading2 .line2{
-webkit-animation-delay:-1.1s;
}
.loading2 .line3{
-webkit-animation-delay:-1.0s;
} .loading2 .line4{
-webkit-animation-delay:-0.9s;
} .loading2 .line5{
-webkit-animation-delay:-0.8s;
}
@-webkit-keyframes loading2{
0%,40%,100%{
-webkit-transform:scaleY(.4);
}
20%{
-webkit-transform:scaleY(1);
}
} /* loading3 */ .loading3{ width:50px; height:50px; border:2px solid #666; border-radius:50%; border-left-color:transparent; border-right-color:transparent;
-webkit-animation:loading3 2s infinite;
}
@-webkit-keyframes loading3{
0% {
-webkit-transform:rotate(0deg);
}
50%{
-webkit-transform:rotate(360deg);
}
100% {
-webkit-transform:rotate(0deg);
}
} /* loading4 */
.loading4{ width:200px; height:40px; font-family:"微软雅黑"; text-align:center;}
.loading4 span{ display:inline-block;
-webkit-animation:loading4 1.4s infinite ease-in-out;
}
.loading4 .str1{ -webkit-animation-delay:-1.3s;}
.loading4 .str2{ -webkit-animation-delay:-1.2s;}
.loading4 .str3{ -webkit-animation-delay:-1.1s;}
.loading4 .str4{ -webkit-animation-delay:-1.0s;}
.loading4 .str5{ -webkit-animation-delay:-.9s;}
.loading4 .str6{ -webkit-animation-delay:-.8s;}
.loading4 .str7{ -webkit-animation-delay:-.7s;} @-webkit-keyframes loading4{
0%,40%,100% {
-webkit-transform:translateY(0px);
}
20% {
-webkit-transform:translateY(-20px);
}
} /* N0.5 */
.loading5{ width:50px; height:50px; position:relative; -webkit-animation:loading5 1.5s linear infinite;}
.loading5 span{ position:absolute; left:50%; top:50%; width:3px; height:10px; display:block; -webkit-transform-origin:center -8px;}
.loading5 .b1{ -webkit-transform:translate(-50%,8px) rotate(-45deg); background-color:#000;}
.loading5 .b2{ -webkit-transform:translate(-50%,8px) rotate(-90deg); background-color:#222;}
.loading5 .b3{ -webkit-transform:translate(-50%,8px) rotate(-135deg); background-color:#444;}
.loading5 .b4{ -webkit-transform:translate(-50%,8px) rotate(-180deg); background-color:#666;}
.loading5 .b5{ -webkit-transform:translate(-50%,8px) rotate(-225deg); background-color:#888;}
.loading5 .b6{ -webkit-transform:translate(-50%,8px) rotate(-270deg); background-color:#aaa;}
.loading5 .b7{ -webkit-transform:translate(-50%,8px) rotate(-315deg); background-color:#ccc;}
.loading5 .b8{ -webkit-transform:translate(-50%,8px) rotate(-360deg); background-color:#eee;} @-webkit-keyframes loading5{
to{
-webkit-transform:rotate(1turn);
}
} </style>
</head> <body> <!-- NO.1 -->
<div class="css_content">
<div class="loading1"></div>
</div> <!-- NO.2 -->
<div class="css_content" style="background-color:#333;">
<div class="loading2">
<span class="line1"></span>
<span class="line2"></span>
<span class="line3"></span>
<span class="line4"></span>
<span class="line5"></span>
</div>
</div>
<!-- NO.3 -->
<div class="css_content" style="background-color:#FFEC73;">
<div class="loading3"></div>
</div> <!-- NO.4 -->
<div class="css_content">
<div class="loading4">
<span class="str1">L</span>
<span class="str2">o</span>
<span class="str3">a</span>
<span class="str4">d</span>
<span class="str5">i</span>
<span class="str6">n</span>
<span class="str7">g</span>
</div>
</div> <!-- NO.5 -->
<div class="css_content">
<div class="loading5">
<span class="b1"></span>
<span class="b2"></span>
<span class="b3"></span>
<span class="b4"></span>
<span class="b5"></span>
<span class="b6"></span>
<span class="b7"></span>
<span class="b8"></span>
</div>
</div> </body>
</html>
利用css3制作的几个loading图的更多相关文章
- 利用CSS3制作淡入淡出动画效果
CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态 ...
- 利用CSS3制作网页动画
如何在网页中实现动画效果动态图片 flashjavascriptcss3变形是一些效果的集合如平移 旋转 缩放 倾斜效果每个效果都可以称为变形(transfrom) 它们可以分别操控元素发生平移.旋转 ...
- 利用css3制作毛玻璃的效果
忙里偷闲,最近又在看许多比较酷炫的效果.现在基于jquery的插件比较多,但是很多插件的兼容性不是太好,所以原生的才是王道.在日常当中,毛玻璃已经不常见了,那是一个很久远年代的东西了.诺,下面就是毛玻 ...
- 第九章 利用CSS3制作网页动画
一.CSS3变形transform 1.平移:translate(x,y) translateX(x) translateY(y) 注意:如果想只向X轴平移那么可以translateX,如果想只向X轴 ...
- 用css3制作旋转加载动画的几种方法
以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...
- 利用box-shadow制作loading图
我们见过很多利用css3做的loading图,像下面这种应该是很常见的.通常制作这种loading,我们会一个标签对应一个圆,八个圆就要八个标签.但是这种做法很浪费资源.我们可以只用一个标签,然后利用 ...
- 利用CSS3实现图片无间断轮播图的实现思路
前言:图片轮播效果现在在各大网站都是非常普遍的,以前我们都是通过postion的left or right来控制dom的移动,这里我要说的是利用css3来制作轮播!相比以前通过postion来移动do ...
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
- 使用HTML5制作loading图
昨天发了一篇使用HTML5 canvas写的时钟的文章,今天发一篇关于使用HTML5制作loading图的文章. <!DOCTYPE html> <html> <head ...
随机推荐
- 多重网格法简介（Multi Grid）
原文链接 多重网格法是一种用于求解方程组的方法,可用于插值.解微分方程等. 从专业角度讲多重网格法实际上是一种多分辨率的算法,由于直接在高分辨率(用于求解的间隔小)上进行求解时对于低频部分收敛较慢,与 ...
- Spring预处理
当需要在某些Spring项目一启动,就执行某些操作时,需要实现改接口ApplicationListener,重写onApplicationEvent方法,将需要的预处理操作全部写在该方法中 当初始化完 ...
- Cordova phonegap开发环境搭建
1.下载并安装Android Studio, 2.下载并安装nodejs 3.通过nodejs来安装cordova(npm install -g cordova ) 4.使用cordova来创建pho ...
- Xcode常用快捷键（持续更新-20160811）
前言 专门花时间记Xcode快捷键,我觉得没必要,一时记住,不久又会忘记. 用到才记. Xcode常用快捷键 新建 shift + cmd + n 新建项目 cmd + n ...
- 关于js实现分页效果的简单代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- md5 (c语言)
/** * \file md5.h * * \brief MD5 message digest algorithm (hash function) * * Copyright (C) 2006-201 ...
- QQ付费群规则重大变更！特别是这类群！
很多人都是知道现在QQ有个付费群功能.以往加群需要你填写一些验证信息给管理员,管理员看你顺眼就放你进去,不顺眼你就进不去了.另外还有一些打广告的人难免会被管理员误判给放进去,令管理员苦恼不已,总有审核 ...
- IOS7开发～Xcode5制作framework
一.Framework 简介(Introduction to Framework Programming Guide) Mac OS X 扩展了 framework 的功能,让我们能够利用它来共享代码 ...
- 各大就业网站对web前端的就业要求
今日与女神有约,在[web前端学习部落22群]有直播公开课,喜欢的朋友赶紧加入吧!随着高等教育的普及,高校毕业生的人数每年都以极快的速度增长,数据显示,2016年,高校毕业生多达765万人,比2015 ...
- python学习笔记(1)
python简介 python是Guido van Rossum在圣诞节打发无聊的时间时候写出来的语言. python是解释性的语言. python是动态类型的语言. python是强类型定义语言(高 ...