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 ...
随机推荐
- C/S,B/S的区别与联系
C/S 是Client/Server 的缩写.服务器通常采用高性能的PC.工作站或小型机,并采用 大型数据库系统,如Oracle.Sybase.Informix 或SQL Server.客户端需要安装 ...
- springboot项目线程使用
下面是一个demo: public class TestThread { private static int nThreads =Runtime.getRuntime().availableProc ...
- python-django rest framework框架之解析器
1.解析器 : 对请求的数据进行解析 - 请求体进行解析. 解析器在你不拿请求体数据时 不会调用. class UsersView(APIView): def get(self,request,*ar ...
- jquery 表单提交不用action
1.今天我做完事去看了一下别人的代码,不用我们很常规的写法.我想让我们来学习一下吧! <form class="form-inline form-mess">//内容在 ...
- 检测用户命令序列异常——使用LSTM分类算法【使用朴素贝叶斯，类似垃圾邮件分类的做法也可以，将命令序列看成是垃圾邮件】
通过 搜集 Linux 服务器 的 bash 操作 日志, 通过 训练 识别 出 特定 用户 的 操作 习惯, 然后 进一步 识别 出 异常 操作 行为. 使用 SEA 数据 集 涵盖 70 多个 U ...
- Python之简单的用户登录和注册
# -*- coding: utf-8 -*- # @Time : 2018/7/26 20:16 # @Author : Adam # @File : exam2.py # @Project: ke ...
- 关于JAVA的一些知识点
1.java.lang.Runtime.getRuntime().availableProcessors() Returns the number of processors available to ...
- linux下如何添加一个用户并且让用户获得root权限 备用
(2010-12-02 09:58:30) 转载▼ 标签: 帐号 权限 杂谈 分类: Linux 测试环境:CentOS 5.5 1.添加用户,首先用adduser命令添加一个普通用户,命令如下: # ...
- Win10系列：UWP界面布局基础7
2.附加属性 有一些XAML元素,其自身的属性大多是在其它的元素中声明和使用的,该元素本身却很少使用,这些在其他元素中声明和使用的属性被称为附加属性(Attached Properties).附加属性 ...
- malloc用法整理
malloc函数原型:void *malloc(unsigned int num_bytes); //分配长度为num_bytes字节的内存块 返回值是void指针,void* 表示未确定类型的指针, ...