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 彩蛋爆料直击 ...
随机推荐
- MySQL 进阶（待发布）
视图 存储过程 触发器 基本函数
- PHP代码中input控件使用id无法POST传值，使用name就可以
<html> <head> <title>Example</title> </head> <body> <?php if ...
- 获取span中的值
js-code:var baseinfoallfeesum=$("#allFeeSum").html(); $("#baseInfoAllFeeSum").va ...
- ORM- 图书系统查询
图书信息系统 表结构设计 # 书 class Book(models.Model): title = models.CharField(max_length=32) publish_date = mo ...
- hdu5794
从(u,v)到(n,m)相当于走x步1*2和y步2*1满足 x+2y=n-u,2x+y=m-v 解方程然后组合计数即可. 以前没写过lucas定理,写一下…… 其实就是C(n,m)%p=C(n/p,m ...
- 【转】如何只用CSS做到完全居中
英文原版链接:http://codepen.io/shshaw/full/gEiDt 我们都知道 margin:0 auto; 的样式能让元素水平居中,而 margin: auto; 却不能做到垂直居 ...
- owasp zap 安全审计工具 安装／拦截请求
1.安装 网址:https://www.owasp.org/index.php/OWASP_Zed_Attack_Proxy_Project 步骤:安装包正常安装即可 2.使用: 来自:http:// ...
- HDU 5695 Gym Class && 百度之星 初赛 1006
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5695 本文链接:http://www.cnblogs.com/Ash-ly/p/5515234.htm ...
- 【LeetCode刷题】SQL-Combine Two Tables
Table: Person +-------------+---------+ | Column Name | Type | +-------------+---------+ | PersonId ...
- Codeforces #449 Div2 D
#449 Div2 D 题意 交互式类题目. 起始有 n 张纸,会给出 m 次数字 p (\(1 \leq p \leq c\)),每次可选择一张纸,并在纸上写上这个数字,如果纸上已经存在数字,会覆盖 ...