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 彩蛋爆料直击 ...
随机推荐
- 性能测试===Locust介绍
简述性能测试 提起性能测试,可能移动APP的从业人员会感觉比较混淆,因为在客户端(Android.iOS)中也有性能测试专项,主要涉及的是APP的启动时间.内存.包大小.帧率,流量等客户端相关的指标. ...
- C# 文件选择对话框
方法一:系统自带 <asp:FileUpload ID="FileSelect" runat="server" /> 方法二:ShowDialog( ...
- xpath用法（持续更新ing）
article:选取所有article元素的所有子节点 /article:选取根元素article article/a:选取所有属于article的子元素的a元素 //div:选取所有div元素 ar ...
- [ 手记 ] Oracle 11g安装过程
安装环境: 操作系统:Centos6.4 Desktop 主机名:oracle 内存:2G 安装前准备: 修改主机名: [root@oracle ~]# vim /etc ...
- jquery 操作dom效率测试------html和append插入文档
$(function () { var htmlResult = createHtmlContent(100); console.log(htmlResult) insertHtml.call($(& ...
- 《Java编程思想》笔记 第十八章 Java I/O 系统
1 File 类 File是一个 文件和目录路径名 的抽象表示,通过File可以查看文件的各种信息,也可以增加删除文件. File构造器接受一个路径字符串并把它与实际文件目录映射起来,也能接受父子 ...
- vue学习记录：vue引入，validator验证，数据信息，vuex数据共享
最近在学习vue,关于学习过程中所遇到的问题进行记录,包含vue引入,validator验证,数据信息,vuex数据共享,传值问题记录 1.vue 引入vue vue的大致形式如下: <temp ...
- SQL查询中in和exists的区别分析
select * from A where id in (select id from B); select * from A where exists (select 1 from B where ...
- [BZOJ2648] SJY摆棋子 kd-tree
2648: SJY摆棋子 Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 5421 Solved: 1910[Submit][Status][Disc ...
- Request 部分功能
Request 六大功能: 1.获取客户端请求信息: getRequestURL方法 -- 返回客户端发出请求完整URL getRequestURI方法 -- 返回请求行中的资源名部分 getQuer ...