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 ...
随机推荐
- oracle 12c新特性 FETCH FIRST、WITH TIES 关键字详解
几乎都是官方文档上的内容. [ OFFSET offset { ROW | ROWS} ] [ FETCH { FIRST | NEXT }[ { rowcount | percent PER ...
- Echarts 简单报表系列二：折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- “SecureCRT遇到一个致命的错误且必须关闭”处理办法
打开SecureCRT时报错:SecureCRT遇到一个致命的错误且发须关闭.一个崩溃转储文件已创建于... 解决办法是,如下在cmd中输入regedit回车打开注册表编缉器 展开HKEY_LOCAL ...
- VMware如何进入安全模式
VMware进入安全模式和物理机一样:使光标处于在虚拟机中激活状态,启动系统时不停按F8即可. 安全模式--只加载必要的驱动和进程:在cmd可以看到部份命令不能执行或命令功能不能完全实现. 网络安全模 ...
- Redis入门第一课
为什么需要NoSQL? 1High performance:web1.0不能点赞互动,web2.0可以互动,里面有很多高并发读写 2Huge Storage:海量数据的高效率存储和访问 3High ...
- IO库----IO类，文件输入输出，string流
一.IO类 1.IO库类型和头文件表: 头文件 类型 iostream istream,wistream 从流读取数据 ostream,wostream 向流写入数据 iostream,wiostre ...
- X的平方
题目描述: 实现 int sqrt(int x) 函数,计算并返回 x 的平方根. 样例 sqrt(3) = 1 sqrt(4) = 2 sqrt(5) = 2 sqrt(10) = 3 题解: 解法 ...
- python select poll epoll的区别
select 优点:为最早的异步io处理模块,他可以再linux上和windows上使用,跨平台兼容性好,而poll和epoll都不能在windows系统环境中使用. 缺点:select的机制决定了他 ...
- RabbitMQ 循环调度
循环调度是针对Consumer消费者来说的.如果有多个Consumer订阅同一个队列的消息,RabbitMQ会自动按照顺序将消息发送到每一个Consumer手中. 就是这么简单!
- 1.6socket服务器传送文件--gui窗口
socket服务器代码 import sys,os,time,_thread from socket import * class Server(object): def __init__(self) ...