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 ...
随机推荐
- GitHub 翻译之 'Hello-world' 翻译
https://guides.github.com/activities/hello-world/ 页面翻译 The Hello World project is a time-honored tra ...
- Oracle 基本操作--数据类型、修改和删除表、增删改查和复制表
一.Oracle基础数据类型:数据类型: 创建数据表时,设计数据表的结构问题,也就是设计及确定数据表中各个列的数据类型,是数值.字符.日期还是图像等其他类型. 因为只有设计好数据表结构,系统才会在磁盘 ...
- 解决audio 在部分移动端浏览器不能自动播放（目前包括ios、微博）
问题描述:项目需要在页面加载完成后自动播放音乐,但在ios中却无法自动播放,需要用户主动触发 解决办法: $('html').one('touchstart',function(){ document ...
- Oracle11g温习-第十九章：审计（audit）
2013年4月27日 星期六 10:52 1.审计的功能:监控用户在database 的 action (操作) 2.审计分类 1) session :在同一个session,相同的语句只产生一个审计 ...
- 专题[vjudge] - 数论0.1
专题[vjudge] - 数论0.1 web-address : https://cn.vjudge.net/contest/176171 A - Mathematically Hard 题意就是定义 ...
- Spring整合Hystrix
1.添加maven依赖 <dependency> <groupId>com.netflix.hystrix</groupId> <artifactId> ...
- 蓝桥杯—ALGO-2 最小最大公倍数
问题描述已知一个正整数N,问从1~N中任选出三个数,他们的最小公倍数最大可以为多少. 输入格式输入一个正整数N. 输出格式输出一个整数,表示你找到的最小公倍数.样例输入9样例输出504数据规模与约定1 ...
- day10-高阶函数
高阶函数 高阶函数:就是把函数当成参数传递的一种函数,例如: def add(x,y,f): return f(x)+f(y) print(add(-8,11,abs)) 结果: 19 解释: 调用a ...
- sqlalchemy tree 树形分类 无限极分类的管理。预排序树，左右值树。sqlalchemy-mptt
简介: 无限极分类是一种比较常见的数据格式,生成组织结构,生成商品分类信息,权限管理当中的细节权限设置,都离不开无限极分类的管理. 常见的有链表式,即有一个Pid指向上级的ID,以此来设置结构.写的时 ...
- C++基础知识：操作符重载
1.C++标准库: C++标准库并不是C++语言的一部分C++标准库是由C++语言编写而成的类库和函数的集合C++标准库中定义的类和对象都位于std命名空间中C++标准库的头文件都不带.h后缀C++标 ...