CSS3一个酷炫的加载效果
上效果图，用截屏工具制作的，看起来有点卡，在网页上面显示还是不错的。
CSS代码：
<style type="text/css">
.loader{
position: absolute;
width: 2.5em;
height: 2.5em;
//border: 1px solid rgba(100,156,136,0.15);
border-radius: 50%;
//box-shadow: 0 0 0.5em rgba(100,156,136,0.75);
transform: rotate(165deg);
animation:rotate 2s infinite;
} @keyframes rotate {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
} .loader::before,.loader::after{
content: '';
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 0.5em;
height: 0.5em;
border-radius: 0.25em;
transform: translate(-50%,-50%);
} .loader::before{
animation: before 2s infinite;
} @keyframes before {
0%{
width: 0.5em;
box-shadow:
1em -0.5em 0.5em rgba(100,156,136,0.75),
-1em 0.5em 0.5em rgba(150,120,20,0.75);
}
55% {
width: 2.5em;
box-shadow:
0 -0.5em rgba(100,156,136,0.75),
0 0.5em rgba(150,120,20,0.75);
}
70% {
width: 0.5em;
box-shadow:
-1em -0.5em rgba(100,156,136,0.75),
1em 0.5em rgba(150,120,20,0.75);
}
100% {
box-shadow:
1em -0.5em rgba(100,156,136,0.75),
-1em 0.5em rgba(150,120,20,0.75);
}
} .loader::after{
animation: after 2s infinite; } @keyframes after{
0%{
height: 0.5em;
box-shadow:
-0.5em -1em 0.5em rgba(200,56,36,0.75),
0.5em 1em 0.5em rgba(50,60,80,0.75);
}
55% {
height: 2.5em;
box-shadow:
-0.5em 0 rgba(200,56,36,0.75),
0.5em 0 rgba(50,60,80,0.75);
}
70% {
height: 0.5em;
box-shadow:
-0.5em 1em rgba(200,56,36,0.75),
0.5em -1em rgba(50,60,80,0.75);
}
100% {
box-shadow:
-0.5em -1em rgba(200,56,36,0.75),
0.5em 1em rgba(50,60,80,0.75);
}
}
}
</style>
HTML：
<body>
<div class="loader"> </div>
</body>
CSS3一个酷炫的加载效果的更多相关文章
- android 新闻应用、Xposed模块、酷炫的加载动画、下载模块、九宫格控件等源码
Android精选源码 灵活的ShadowView,可替代CardView使用 基于Tesseract-OCR实现自动扫描识别手机号 Android播放界面仿QQ音乐开源音乐播放器 新闻应用项目采用了 ...
- ajax一个很好的加载效果
推荐一个常用的jquery加载效果插件: 要引入这个插件的css和js: <link href="<%=path %>/css/showLoading.css" ...
- 纯CSS3打造非常炫的加载动画
纯css3打造的一款非常炫的加载图.用在需要一定时间加载的地方非常合适.先上效果图: 点击这里在线预览 代码非常简单.没有用任何javascript代码.纯css3实现. html代码: <di ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- 使用 SVG 实现一个漂亮的页面预加载效果
今天我们要为您展示如何使用 CSS 动画, SVG 和 JavaScript 创建一个简单的页面预加载效果.对于网站来说,这些预载入得画面提供了一种创造性的方法,使用户在等待内容加载的时候不会那么无聊 ...
- 使用css3实现小菊花加载效果
使用css3实现小菊花加载效果 最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意去等待.而页面中最常用的做法是把动画做成gif格式,当做背景图或是img ...
- 美团、点评、猫眼App下拉加载效果的源码分享
今天我准备拿大众点评.美团.猫眼电影三款App的实例来分享一下APICloud下拉加载这个模块的效果. 美团App下拉加载效果 以美团中的下拉酷似动画的萌萌着小人儿效果作为参考,来实现的一个加载模 ...
- Flutter实战视频-移动电商-20.首页_火爆专区上拉加载效果
20.首页_火爆专区上拉加载效果 上拉加载的插件比较都.没有一个一枝独秀的 可以自定义酷炫的header和footer 一直在更新 推荐使用这个插件: https://github.com/xuelo ...
随机推荐
- React文档（六）state和生命周期
想一下之前的章节时钟的例子. 目前为止我们只学习了一直方式去更新UI. 我们调用ReactDOM.render()方法去改变渲染的输出: function tick() { const element ...
- python-day74--知识总体总结
1. 课程介绍 - 数据类型 - 函数 - 面向对象三大特性:继承,封装,多态 - socket:本质传输字节:所有网络通信都基于socket ...
- python 绝版线程池
2.绝版线程池设计思路:运用队列queue a.队列里面放任务 b.线程一次次去取任务,线程一空闲就去取任务 import queueimport threadingimport contextlib ...
- Thirft框架介绍
1.前言 Thrift是一个跨语言的服务部署框架,最初由Facebook于2007年开发,2008年进入Apache开源项目.Thrift通过一个中间语言(IDL, 接口定义语言)来定义RPC的接口和 ...
- servlet初认知（持续更新中）
一:前言: 一个Servlet程序其实就是一个实现了Java特殊接口的类,它由支持Servlet(具有Servlet引擎)的WEB服务器调用和启动运行.一个Servlet程序负责处理它对应的一个或者多 ...
- php入门知识储备
知识结构 开发环境 能够搭建开发环境(一键安装包也算) 知道开发环境中包含哪些软件 知道每种软件的用处 知道每种软件的配置文件(配置项可以慢慢体会) HTML 知道什么是标签.属性 了解基本的HTML ...
- vector list map set等容器某些函数的使用区别
map, set, vector erase的正确使用方法 一.erase 的用法区别 STL中的容器按存储方式分为两类,一类是按以数组形式存储的容器(如:vector .deque); 另一类是以不 ...
- 修改Host，配置域名访问
修改Host,配置域名访问 虽然我们已经能够通过localhost访问本地网站了,为了提高逼格,我们可以修改host文件,设置一个自己喜欢的域名指向本地网站,岂不是更高大上. 明确需求 通过配置, ...
- jsp自定义标签开发
参考:http://blog.csdn.net/lw001x/article/details/7589302
- [Codeforces797F]Mice and Holes
Problem n个老鼠,m个洞,告诉你他们的一维坐标和m个洞的容量限制,问最小总距离. Solution 用dp[i][j]表示前i个洞,进了前j个老鼠的最小代价 dp[i][j]=min(dp[i ...