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 彩蛋爆料直击 ...
随机推荐
- 专业术语/Java专有名词
微服务 Web Service WebAPI(MicroSoft) RESTful RPC 微服务 服务拆分,利用轻量化机制(通常为HTTP源API)实现通信,复杂度可控,独立部署,技术选型灵活,容错 ...
- python3 闭包函数，装饰器
闭包函数: 1.定义在函数内部的函数 2.包含对外部作用域而非全局作用域的引用特点: 1.自带作用域 2.延迟计算(取到内存地址,加括号执行) def 外部函数(func): def 内部函数(*ar ...
- Solidity 文档--第二章：安装 Solidity
安装Solidity 基于浏览器的Solidity 如果你只是想尝试一个使用Solidity的小合约,你不需要安装任何东西,只要访问基于浏览器的Solidity. 如果你想离线使用,你可以保存页面到本 ...
- Scanner类的个人分析
Scanner类读取键盘输入(java中Scanner类nextLine()和next()的区别和使用方法&&java 中的Scanner(非常详细不看后悔)): 2017/3/18 ...
- eclipse 关键字高亮显示
关键字高亮显示(变量.函数名……) Toggle Mark Occurrences (Alt + Shift + O), 也可以在eclipse主界面的快捷工具栏:按下那个小黄蜡笔图标,来设置高亮显 ...
- AC日记——[Ahoi2013]作业 bzoj 3236
3236 思路: 莫队+树状数组维护: 代码: #include <cmath> #include <cstdio> #include <cstring> #inc ...
- （四）监控cpu
定义规则:创建模板--->群组--->应用集--->监控项--->图形--->触发器--->添加主机(加入到群组,关联模板) 1)cpu空闲率,用户态使用率,内核态 ...
- Ubuntu 安装 tensorflow-gpu + keras
转载请注明: 仰望大牛的小清新:http://www.cnblogs.com/luruiyuan/ 本文原网址:http://www.cnblogs.com/luruiyuan/p/6660142.h ...
- 循环节（BFS）
循环节 时间限制: 1 Sec 内存限制: 64 MB提交: 56 解决: 16[提交][状态][讨论版] 题目描述 第一节是英语课.今天,老师又教了桐桐很多单词.桐桐发现所有单词都有循环节(大写 ...
- 【高斯消元】【异或方程组】poj1222 EXTENDED LIGHTS OUT
由于每个点的状态受到其自身和周围四个点的影响,所以可以这样建立异或方程组: 引用题解: http://hi.baidu.com/ofeitian/item/9899edce6dc6d3d2974452 ...