CSS实现四种loading动画效果
四种loading加载效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>四种加载效果</title>
<style>
/*第一种*/
.demo1 {
width: 4px;
height: 4px;
border-radius: 2px;
background: #68b2ce;
float: left;
margin: 3px;
animation: demo1 linear 1s infinite;
-webkit-animation: demo1 linear 1s infinite;
}
.demo1:nth-child(){
animation-delay:0s;
}
.demo1:nth-child(){
animation-delay:.15s;
}
.demo1:nth-child(){
animation-delay:.3s;
}
.demo1:nth-child(){
animation-delay:.45s;
}
.demo1:nth-child(){
animation-delay:.6s;
}
@keyframes demo1{
%,%,% {transform: scale();}
% {transform: scale(2.5);}
}
@-webkit-keyframes demo1{
%,%,% {transform: scale();}
% {transform: scale(2.5);}
}
/*第二种*/
.demo2 {
width: 4px;
height: 6px;
background: #68b2ce;
float: left;
margin: 3px;
animation: demo2 linear 1s infinite;
-webkit-animation: demo2 linear 1s infinite;
}
.demo2:nth-child(){
animation-delay:0s;
}
.demo2:nth-child(){
animation-delay:.15s;
}
.demo2:nth-child(){
animation-delay:.3s;
}
.demo2:nth-child(){
animation-delay:.45s;
}
.demo2:nth-child(){
animation-delay:.6s;
}
@keyframes demo2{
%,%,% {transform: scale();}
% {transform: scaleY();}
}
@-webkit-keyframes demo2{
%,%,% {transform: scale();}
% {transform: scaleY();}
}
/*第三种*/
#loading3 {
position: relative;
width: 50px;
height: 50px;
}
.demo3 {
width: 4px;
height: 4px;
border-radius: 2px;
background: #68b2ce;
position: absolute;
animation: demo3 linear .8s infinite;
-webkit-animation: demo3 linear .8s infinite;
}
.demo3:nth-child(){
left: 24px;
top: 2px;
animation-delay:0s;
}
.demo3:nth-child(){
left: 40px;
top: 8px;
animation-delay:.1s;
}
.demo3:nth-child(){
left: 47px;
top: 24px;
animation-delay:.1s;
}
.demo3:nth-child(){
left: 40px;
top: 40px;
animation-delay:.2s;
}
.demo3:nth-child(){
left: 24px;
top: 47px;
animation-delay:.4s;
}
.demo3:nth-child(){
left: 8px;
top: 40px;
animation-delay:.5s;
}
.demo3:nth-child(){
left: 2px;
top: 24px;
animation-delay:.6s;
}
.demo3:nth-child(){
left: 8px;
top: 8px;
animation-delay:.7s;
}
@keyframes demo3{
%,%,% {transform: scale();}
% {transform: scale();}
}
@-webkit-keyframes demo3{
%,%,% {transform: scale();}
% {transform: scale();}
}
/*第四种*/
#loading5 {
width: 20px;
height: 100px;
border-bottom: 1px solid #68b2ce;
}
.demo5 {
width: 20px;
height: 20px;
border-radius: 10px;
background: #68b2ce;
animation: demo5 cubic-bezier(0.5,0.01,0.9,) .6s infinite alternate;
-webkit-animation: demo5 cubic-bezier(0.5,0.01,0.9,) .6s infinite alternate;
}
@keyframes demo5{
%{
transform:translateY(0px);
-webkit-transform:translateY(0px);
}
%{
transform:translateY(80px);
-webkit-transform:translateY(80px);
}
}
@-webkit-keyframes demo5{
%{
transform:translateY(0px);
-webkit-transform:translateY(0px);
}
% {
transform:translateY(80px);
-webkit-transform:translateY(80px);
}
}
</style>
<body>
<div id="loading1">
<div class="demo1"></div>
<div class="demo1"></div>
<div class="demo1"></div>
<div class="demo1"></div>
<div class="demo1"></div>
</div>
<div id="loading2">
<div class="demo2"></div>
<div class="demo2"></div>
<div class="demo2"></div>
<div class="demo2"></div>
<div class="demo2"></div>
</div>
<div id="loading3">
<div class="demo3"></div>
<div class="demo3"></div>
<div class="demo3"></div>
<div class="demo3"></div>
<div class="demo3"></div>
<div class="demo3"></div>
<div class="demo3"></div>
<div class="demo3"></div>
</div>
<div id="loading5">
<div class="demo5"></div>
</div>
</body>
</html>
CSS实现四种loading动画效果的更多相关文章
- 实现loading动画效果
下面我就来罗列三种实现loading动画效果的方法. 方法一:使用UIImageView自带的方法来实现,这也是我推荐的实现方法. NSMutableArray *array = [[NSMutabl ...
- ios开发之简单实现loading动画效果
最近有朋友问我类似微信语音播放的喇叭动画和界面图片加载loading界面是怎样实现的,是不是就是一个gif图片呢!我的回答当然是否定了,当然不排除也有人用gif图片啊!下面我就来罗列三种实现loadi ...
- 《网页设计基础——CSS的四种引入方式详解》
网页设计基础--CSS的四种引入方式详解 一.行内式: 规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中. 格 ...
- jQuery10种不同动画效果的响应式全屏遮罩层
遮罩层有很多今天介绍这个jQuery10种不同动画效果的响应式全屏遮罩层 效果预览 下载地址 实例代码 <div class="container"> <head ...
- 简单css实现input提示交互动画效果
通过基础CSS实现输入提示交互动画效果,并兼容各浏览器! 1.效果展示 2.css代码 h4 { margin: 30px 0; } input { margin:; font-size: 16px; ...
- Atitit Loading 动画效果
Atitit Loading 动画效果 使用才场景,加载数据,以及显示警告灯.. 要有手动关闭按钮 <div class="spinner loading_part" sty ...
- 页面中CSS的四种引入方式的介绍与比较
转自:https://blog.csdn.net/qq_38689666/article/details/79039392 一:行内式 <p style="color:red" ...
- [Swift通天遁地]五、高级扩展-(11)图像加载Loading动画效果的自定义和缓存
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- Westciv Tools主要为CSS3提供了渐变gradients、盒子阴影box-shadow、变形transform和文字描边四种在线生成效果的工具
Westciv Tools主要为CSS3提供了渐变gradients.盒子阴影box-shadow.变形transform和文字描边四种在线生成效果的工具 1.Westciv Tools 彩蛋爆料直击 ...
随机推荐
- python基础===map和zip的用法
>>> list1=[1,45,232,45,666,64] >>> list2=["ss","kein","to ...
- platform型设备在/dev目录下自动创建设备节点的分析【转】
转自:http://blog.csdn.net/rockrockwu/article/details/7357648 系统启动过程中platform设备.驱动注册完毕,为什么在/dev目录下就自动创建 ...
- 【bzoj2796】 [Poi2012]Fibonacci Representation
给出一个数字,用FIB数列各项加加减减来得到. 问最少要多少个(可以重复使用) 大概试了一下,fibonacci数列的增长是很快的,大概到了90+项就超过了题目范围…… 所以每次找一个最近的fibon ...
- 6.flume实战（三）※
需求:将A服务器上的日志实时采集到B服务器上面去 大致原理: 技术选型: exec source + memory channel + avro sink avro source + memory c ...
- 经常用到的Eclipse快捷键(更新中....)
alt+shift+s:弹出Source选项,用于生成get,set等方法. Ctrl+E:快速显示当前Editer的下拉列表 alt+shift+r:重命名 Ctrl+Shift+→/Ctrl+Sh ...
- 解决 WP迁移后出现的404错误
项目迁移 WordPress 后仅首页正常,其它页面全部 404.时隔一年,再度遇到这问题,总结和梳理一下. 1.想办法登录后台,刷新一次“设置”中的“固定链接”.比如换成默认后保存,再设回原先设置并 ...
- jenkins,已令人发指的简发到如此地步了？
不用tomcat,一条命令.... java -jar jenkins.war
- hdu5737
首先思考一个朴素的做法 将b[]维护成一个线段树套有序表,每次修改a[]用线段树+lazy tag 并在线段树的子区间上在有序表中二分更新这段区间中a[i]>=b[i]的值,复杂度O(nlog^ ...
- 10、Flask实战第10天：视图使用装饰器
在实际开发中,我们有时候会用到自己定义装饰器并应用到函数视图或者类视图里面:比如:我们要想进入个人中心页面,首先要验证你是否登录,否则进不去,下面我们来模拟这个场景 定义一个装饰器 from func ...
- Jenkins获取分支的插件
Jenkins--->xxxx--->配置--->参数化构建过程--->选择Git Parameter Plug-In插件 Name: git_branch Descripti ...