CSS3_loading效果
写个div给他个基本样式：
<body>
<div class="load-container load" id="loader" >
<div class="loader">loading..</div>
</div>
</body>
<style>
body{
vertical-align: baseline;
margin:;
padding:;
background: #0dcecb none repeat scroll 0 0;
color: #fff;
font-family: "Lato",sans-serif;
font-size: 62.5%; }
.load-container {
border: 1px solid rgba(255, 255, 255, 0.2);
box-sizing: border-box;
/*float: left;*/
height: 240px;
overflow: hidden;
position: relative;
width: 240px;
margin:100px 200px;
}
.load .loader, .load .loader:before, .load .loader:after {
animation: 1s ease-in-out 0s normal none infinite running load1;
background: #fff none repeat scroll 0 0;
height: 4em;
width: 1em;
} .load .loader:before, .load .loader:after {
content: "";
position: absolute;
top:;
}
.load .loader:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.load .loader:after {
left: 1.5em;
}
.load .loader {
text-indent: -9999em;
margin: 8em auto;
position: relative;
font-size: 11px;
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
} @-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0 #FFF;
height: 4em;
}
40% {
box-shadow: 0 -2em #ffffff;
height: 5em;
}
}
@keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0 #FFF;
height: 4em;
}
40% {
box-shadow: 0 -2em #ffffff;
height: 5em;
}
} </style>
效果图：
CSS3_loading效果的更多相关文章
- 关于Mongodb的全面总结
MongoDB的内部构造<MongoDB The Definitive Guide> MongoDB的官方文档基本是how to do的介绍,而关于how it worked却少之又少,本 ...
- 纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
- Android UI体验之全屏沉浸式透明状态栏效果
前言: Android 4.4之后谷歌提供了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏. 虚拟按键动态隐藏, 应用可以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 身临其境 的体 ...
- 哪种缓存效果高？开源一个简单的缓存组件j2cache
背景 现在的web系统已经越来越多的应用缓存技术,而且缓存技术确实是能实足的增强系统性能的.我在项目中也开始接触一些缓存的需求. 开始简单的就用jvm(java托管内存)来做缓存,这样对于单个应用服务 ...
- 简单入门canvas - 通过刮奖效果来学习
一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
- CSS3 3D立方体效果－transform也不过如此
CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
- WPF做12306验证码点击效果
一.效果 和12306是一样的,运行一张图上点击多个位置,横线以上和左边框还有有边框位置不允许点击,点击按钮输出坐标集合,也就是12306登陆的时候,需要向后台传递的参数. 二.实现思路 1.获取验证 ...
- app引导页(背景图片切换加各个页面动画效果)
前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...
- PhotoView实现图片随手势的放大缩小的效果
项目需求:在listView的条目中如果有图片,点击条目,实现图片的放大,并且图片可以根据手势来控制图片放大缩小的比例.类似于微信朋友圈中查看好友发布的照片所实现的效果. 思路是这样的:当点击条目的时 ...
随机推荐
- PHP工厂模式的研究
工厂方法模式 把 创造者类 和要生产的 产品类 分离.创建者是一个工厂类,其定义了产品生产的类方法.一般情况下,创建者类的每个子类实例化一个相应的产品子类. 下面是单个产品的实现代码: <?ph ...
- ODBC连接发生错误：未发现数据源名称并且未指定默认驱动程序
程序在使用ODBC方式连接数据库时发生错误: ERROR [IM002] [Microsoft][ODBC 驱动程序管理器] 未发现数据源名称并且未指定默认驱动程序. 什么原因造成的呢? 本人使用&l ...
- Qt 安装一个Service
QString command = "sc create YourServiceName binPath= \""+application_path+"\&qu ...
- 前端性能优化（DOM篇）
原文链接:https://segmentfault.com/a/1190000000490322 缓存DOM对象 JavaScript的DOM操作可以说是JavaScript最重要的功能,我们经常要根 ...
- bat批量删.svn
==================1======================= Bat代码 收藏代码 @echo off :start ::启动过程,切换目录 set pwd=%cd% cd % ...
- qt_文本编辑器实现_附带详细注释和源码下载
源码下载: 链接: http://pan.baidu.com/s/1c21EVRy 密码: qub8 实现主要的功能有:新建,打开,保存,另存为,查找(查找的时候需要先将光标放到最下面位置才能查全,不 ...
- SQL语句简介
1.Top.Distinct Top 获取前几条数据,top一般都与order by连用 获得年纪最小的5个学生 select top 5 * from A order by classesId 获 ...
- Lattice 的 DDR IP核使用调试笔记之DDR 的 仿真
—— 远航路上ing 整理于 博客园.转载请标明出处. 在上节建立完工程之后,要想明确DDR IP的使用细节,最好是做仿真.然后参考仿真来控制IP 核. 仿真的建立: 1.在IP核内的以下路径找到以下 ...
- Cash Cow【dfs较难题应用】【sdut2721】
Cash Cow Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 题目链接:http://acm.sdut.edu.cn/sdut ...
- JavaScript - call(this)
为什么使用call(this), 而不是直接使用(function(){})(); "use strict" function Foo() { (function() { cons ...