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的条目中如果有图片,点击条目,实现图片的放大,并且图片可以根据手势来控制图片放大缩小的比例.类似于微信朋友圈中查看好友发布的照片所实现的效果. 思路是这样的:当点击条目的时 ...
随机推荐
- Dnsmasq安装与配置-搭建本地DNS服务器 更干净更快无广告DNS解析
默认的情况下,我们平时上网用的本地DNS服务器都是使用电信或者联通的,但是这样也导致了不少的问题,首当其冲的就是上网时经常莫名地弹出广告,或者莫名的流量被消耗掉导致网速变慢.其次是部分网站域名不能正常 ...
- Effective C++ -----条款11: 在operator=中处理“自我赋值”
确保当对象自我赋值时operator=有良好行为.其中技术包括比较“来源 对象”和“目标对象”的地址.精心周到的语句顺序.以及copy-and-swap. 确定任何函数如果操作一个以上的对象,而其中多 ...
- 针对Xcode的警告忽略消除处理
一.问题描述 html代码如下 <html> <head> <meta charset="utf-8"/> <title>我的网页& ...
- ajax提交表单
$.ajax({ type: "POST", url: action, data: $('#checkout-form').serialize(), success: functi ...
- JavaScript for循环里边异步操作问题。
问题:(DRIVING.search是异步操作) for循环中做异步操作会导致aDistances数组里边的数据全部都是从A_SHOP_INFO数组中最后一条数据获取的值. var iIdx = 0; ...
- LinkIssue: Error 'LINK : fatal error LNK1123: failure during conversion to COFF: file invalid or cor
参考:http://blog.csdn.net/junjiehe/article/details/16888197 使用VisualStudio 编译链接中可能出现如下错误: LINK : fatal ...
- 实现iOS前台时的推送弹窗效果
原文链接 或许很多童鞋还不知道,在 iOS 中收到推送通知时,如果 App 处于前台运行的情况下,推送的顶部弹窗是不会弹出来的. 然而就是有很多**的产品经理都会提出类似这样的**需求:那就是在 Ap ...
- sendto : Permission denied
遇到如题的问题,google了一番,找到了解决方法,写下来备用 问题: udp发送数据时候报错sendto error : Permission denied 改正方法: 在创建了套接字后,加上下列 ...
- DB2 上copy表结构及数据
现已有一行数据,要复制为多行,每行只有两个字段值不同,db2 没有sql server的top关键字,本只想复制几次,然后update逐条数据,发现不行. 然后想到不如临时创建一张表B,插入此行数据, ...
- 我的JavaEE学习路线图
从学习Java开发到现在虽然也已经快三年了,但是要说到分享一下经验实在是不敢当.权当是对自己的一个总结吧,希望大家不吝指教,互相交流. 照旧,还是现来整理一下我学习Java的一个路线图吧,然后按照这个 ...