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的条目中如果有图片,点击条目,实现图片的放大,并且图片可以根据手势来控制图片放大缩小的比例.类似于微信朋友圈中查看好友发布的照片所实现的效果. 思路是这样的:当点击条目的时 ...
随机推荐
- 常见kill信号
字符名 数字名 组合键ctrl+ 备注 SIGTERM 15 kill的默认值,可以杀死后台进程 SIGKILL 9 不可忽略,必杀技 SIGTSTP 20 Z 前台组全暂停(只是组合键方式吧 ...
- 基于NHibernate的开发框架的设计
上次的 NHibernate的Session管理策略和NHibernateHelper 发布并提供下载,给NHibernate刚入门的同学们带来很多便利. 最近有同学在求NH的通用仓储,正好我最近也设 ...
- jsp通过s:hidden传值给后台，后台数据出现了若干逗号问题
<s:iterator value="rpActionVO.page.result" id="list" status="st"> ...
- 6. ZigZag Conversion
题目: The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows l ...
- ios cell常用属性
1.设置UITableViewCell的accessoryView 有时候我们需要设置cell的一些样式,比如下图, 这个就是设置了cell的accessory属性的内容,如果我们想在上面显示Swit ...
- [Android Pro] AAR and JAR
svn status svn log --limit 3 > RELEASE_NOTE.txt cat RELEASE_NOTE.txt pwd project_name_prefix=&quo ...
- 无根树转有根树（dfs，tree）
#include <bits/stdc++.h> #include <iostream> #include <queue> #include <stdio.h ...
- postgres与osm初步使用
layout: post title: postgres与osm初步使用 date: 2016-9-20 categories: blog tags: [地图开发] description:地图开发 ...
- phpcms 标签
都说pc标签{pc:content参数名="参数值"参数名="参数值"参数名="参数值"} 但是 参数名对应的具体参数值有那些,菜鸟就不知道 ...
- 23.备忘录模式(Memento Pattern)
using System; using System.Collections.Generic; namespace ConsoleApplication6 { /// <summary> ...