css3--简单的加载动画
.load-container {
width: 30%;
height: auto;
position: relative;
margin: 1rem auto;
} .load {
width: 2.6rem;
height: 2.6rem;
margin: 0 auto;
border: 0.4rem solid #f3f3f3;
border-top: 0.4rem solid #33adee;
border-radius: 50%;
animation: loading 1.2s infinite linear;
} @-webkit-keyframes loading {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@-moz-keyframes loading {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@-ms-keyframes loading {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@-o-keyframes loading {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes loading {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
<div class="load-container">
<div class="load"></div>
</div>
css3--简单的加载动画的更多相关文章
- 用css3制作旋转加载动画的几种方法
以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...
- 源码分享-纯CSS3实现齿轮加载动画
纯CSS3实现齿轮加载动画是一款可以用来做Loading动画的CSS3特效代码. 有兴趣的朋友可以下载下来试试:http://www.huiyi8.com/sc/8398.html
- 原生JS+ CSS3创建loading加载动画;
效果图: js创建loading show = function(){ //loading dom元素 var Div = document.createElement("div" ...
- 一个简单的加载动画,js实现
简单效果图: html: <div class="box"> <ul> <li></li> <li></li> ...
- css3很酷的加载动画多款
在线实例:http://www.admin10000.com/document/3601.html 源码:https://github.com/tobiasahlin/SpinKit
- css3动画特效:纯css3制作win8加载动画特效
Windows 8 完整效果如上图:这个里面可能是css冲突,喜欢的可以自己去体征一下: css特效代码: <style type="text/css"> ...
- 我用 CSS3 实现了一个超炫的 3D 加载动画
今天给大家带来一个非常炫酷的CSS3加载Loading动画,它的特别之处在于,整个Loading动画呈现出了3D的视觉效果.这个Loading加载动画由12个3D圆柱体围成一个椭圆形,同时这12个圆柱 ...
- 几行css3代码实现超炫加载动画
之前为大家分享了css3实现的加载动画.今天为大家带来一款只需几行代码就可以实现超炫的动画加载特效.我们一起看下效果图: 在线预览 源码下载 实现代码: 极简的html代码: <div> ...
- 2款不同样式的CSS3 Loading加载动画 附源码
原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
- 16款纯CSS3实现的loading加载动画
分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
随机推荐
- 关于thinkphp 命令行
很多人做多年开发只懂得PHP能在浏览器下运行或者只能结合APACHE等WEB服务器运行,却不晓得,PHP也能用命令行执行,或许是由于大多人在WINDOWS平台做开发部署运行,比较少接触LINUX. T ...
- [bzoj4765]普通计算姬(分块+树状数组+DFS序)
题意 给定一棵n个节点的带权树,节点编号为1到n,以root为根,设sum[p]表示以点p为根的这棵子树中所有节点的权值和.计算姬支持下列两种操作: 1 给定两个整数u,v,修改点u的权值为v. 2 ...
- 03016_DBCP连接池
1.连接池概述 (1)用池来管理Connection,这样可以重复使用Connection: (2)有了池,所以我们就不用自己来创建Connection,而是通过池来获取Connection对象: ( ...
- 关于Android手机MTP模式连接的一些设置(win7和ubuntu下,以红米1s为例)
有些手机的MTP模式在电脑上识别不了,须要一些设置才干够,以下就网上收集来的一些设置方法集中贴过来: 一. win7下 參考:http://blog.ammrli.com/?p=1117 1.在设备管 ...
- SQL Server数据全同步及价值分析[终结版]
SQL Server数据全同步[终结版] 版权全部.转载请注明出处.谢谢! 经过两天的同步编写和測试.出了第一个Release版本号: 1. 本函数仅支持单向同步.即从一个主数据库想多个从数据库同步 ...
- 第六课 Struts的视图组件
Struts框架的视图负责为客户提供动态网页内容. Struts的视图主要由JSP网页构成.此外还包含客户化的标签和ActionForm Bean.这些组件提供了 对国际化.接收用户输入的表单数据.表 ...
- Lesson 2 Building your first web page: Part 1
In this ‘hands-on’ module we will be building our first web page in no time. We just need to quickly ...
- 关于commJS 和 es6 的一些区别
CommonJS模块与ES6模块的区别 本文转自 https://www.cnblogs.com/unclekeith/archive/2017/10/17/7679503.html CommonJS ...
- 2015北京网络赛 G Boxes BFS+打表
G Boxes 题意:n个位置摆有n个箱子,每次移动只能把相邻的垒起来,且上面的必须小于下面的.求摆成升序需要移动多少步. 思路:这里的n很小,只有7.但是bfs最快的情况需要2s左右,所以就打表了. ...
- Codefroces B. Hamming Distance Sum
Genos needs your help. He was asked to solve the following programming problem by Saitama: The lengt ...