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 彩蛋爆料直击 ...
随机推荐
- Codeforces 940F Machine Learning 带修改莫队
题目链接 题意 给定一个长度为\(n\)的数组\(a\),\(q\)个操作,操作分两种: 对于区间\([l,r]\),询问\(Mex\{c_0,c_1,c_2,⋯,c_{10^9}\}\),其中\(c ...
- cobalt strike使用笔记
启动: ./teamserver 192.168.74.1 admin #启动cs服务器.admin为密码． 监听器: windows/beacon_dns/reverse_dns_txtwindow ...
- IC卡的传输协议（3）【转】
转自:http://bbs.ednchina.com/BLOG_ARTICLE_172027.HTM 3.终端传输层 本节描述了在终端和 IC 卡之间传输的命令和响应 APDU 的机制 ...
- Ajax提交数据的data序列化数据提交即可
jQuery.ajax({ url: "<s:url value="/contractinfo/finanContractInfoMgrAction!saveOrMod.ac ...
- Jquery实现全选和取消全选的方法
<input type="checkbox" id="all" />全选<br /> <input type="chec ...
- 简单的curl抓取数据
工欲善其事,必先利其器,数据抓取同样也是如此,PHP数据抓取常用CURL. CURL是一个使用libcurl库与各类服务器进行通讯,支持很多协议,如HTTP.FTP.TELNET等. curl_ini ...
- Java基础：异常机制
最近开始了找工作的面试,在面试过程中,面试官问了关于Java当中的异常处理机制,一直以来,无论写代码还是看书,自己对异常处理这一块就没有很好的重视过,对它的认知也仅仅停留在通过Try-catch去进行 ...
- docker 与 yarn
有时我们的项目是使用yarn去发布的,当需要使用docker发布这个项目时,安装yarn是必须的,但是平时使用的npm install -g yarn此时却不可用 从网站上找到解决的方法 地址:htt ...
- 基于opencv的摄像头的标定
四个坐标系分别为:世界坐标系(Ow),摄像机坐标系(Oc),图像物理坐标系(O1,单位mm),图像像素坐标系(O,位于视野平面的左上角,单位pix). 空间某点P到其像点p的坐标转换过程主要是通过这四 ...
- lunux多线程编程
1.进程与线程 1)用户空间角度: 进程:fork()创建进程,在创建时,重新申请了内存空间,copy了父进程的所有信息. 线程:pthread_create()创建进程时,只申请自己的栈空间. 2) ...