十六种炫酷纯css加载动画（一）

2023-10-27

一个好的开篇，会给你这个项目增加不少分值。

有没有遇到过打开页面加载一段时间，页面内容才加载出来。在等待加载的过程中页面却是空白页，给用户的体验特别不好，会让项目降一个档次。下面的十六种炫酷炸裂的css加载动画，会让你在等待的过程中，体验视觉盛宴，给用户不一般的加载体验，对，就是纯css3的炫酷加载动画，请看效果！

码字不易，且行且珍惜。

加载1

在这里插入图片描述

css源码

.title{
    width: 100%;
    text-align: center;
    margin:60px 0;
    font-size: 18px;
    color: #999;
}
.loadingOne{
    width: 80px;
    height: 40px;
    margin: 0 auto;
}
.loadingOne span{
    display: inline-block;
    width: 8px;
    height: 100%;
    border-radius: 4px;
    background: lightgreen;
    -webkit-animation: load 1s ease infinite;
    animation: load 1s ease infinite;
}
@-webkit-keyframes load{
    0%,100%{
        height: 40px;
        background: lightgreen;
    }
    50%{
        height: 70px;
        margin: -15px 0;
        background: lightblue;
    }
}
.loadingOne span:nth-child(2){
    -webkit-animation-delay:0.2s;
    animation-delay:0.2s;
}
.loadingOne span:nth-child(3){
    -webkit-animation-delay:0.4s;
    animation-delay:0.4s;
}
.loadingOne span:nth-child(4){
    -webkit-animation-delay:0.6s;
    animation-delay:0.6s;
}
.loadingOne span:nth-child(5){
    -webkit-animation-delay:0.8s;
    animation-delay:0.8s;
}

html源码

<div class="loadingOne">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

加载2

在这里插入图片描述

css源码

.loadingTwo{
    width: 150px;
    height: 4px;
    border-radius: 2px;
    margin: 0 auto;
    margin-top:100px;
    position: relative;
    background: lightgreen;
    -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
    animation: changeBgColor 1.04s ease-in infinite alternate;
}
.loadingTwo span{
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: lightgreen;
    position: absolute;
    margin-top: -7px;
    margin-left:-8px;
    -webkit-animation: changePosition 1.04s ease-in infinite alternate;
    animation: changePosition 1.04s ease-in infinite alternate;
}
@-webkit-keyframes changeBgColor{
    0%{
        background: lightgreen;
    }
    100%{
        background: lightblue;
    }
}
@-webkit-keyframes changePosition{
    0%{
        background: lightgreen;
    }
    100%{
        margin-left: 142px;
        background: lightblue;
    }
}

html源码

<div class="loadingTwo">
    <span></span>
</div>

加载3

在这里插入图片描述

css源码

.loadingThree{
    width: 150px;
    height: 15px;
    margin: 0 auto;
    margin-top:100px;
}
.loadingThree span{
    display: inline-block;
    width: 15px;
    height: 100%;
    margin-right: 5px;
    border-radius: 50%;
    background: lightgreen;
    -webkit-animation: load 1.04s ease infinite;
}
.loadingThree span:last-child{
    margin-right: 0px;
}
@-webkit-keyframes load{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
.loadingThree span:nth-child(1){
    -webkit-animation-delay:0.13s;
}
.loadingThree span:nth-child(2){
    -webkit-animation-delay:0.26s;
}
.loadingThree span:nth-child(3){
    -webkit-animation-delay:0.39s;
}
.loadingThree span:nth-child(4){
    -webkit-animation-delay:0.52s;
}
.loadingThree span:nth-child(5){
    -webkit-animation-delay:0.65s;
}

html源码

<div class="loadingThree">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

加载4

在这里插入图片描述

css源码

.loadingFour{
		width: 150px;
		height: 15px;
		margin: 0 auto;
		margin-top:100px;
		text-align: center;
	}
	.loadingFour span{
		display: inline-block;
		width: 15px;
		height: 100%;
		margin-right: 5px;
		background: lightgreen;
		-webkit-animation: load 1.04s ease infinite;
	}
	.loadingFour span:last-child{
		margin-right: 0px;
	}
	@-webkit-keyframes load{
		0%{
			opacity: 1;
		}
		100%{
			opacity: 0;
		}
	}
	.loadingFour span:nth-child(1){
		-webkit-animation-delay:0.13s;
	}
	.loadingFour span:nth-child(2){
		-webkit-animation-delay:0.26s;
	}
	.loadingFour span:nth-child(3){
		-webkit-animation-delay:0.39s;
	}
	.loadingFour span:nth-child(4){
		-webkit-animation-delay:0.52s;
	}
	.loadingFour span:nth-child(5){
		-webkit-animation-delay:0.65s;
	}.loadingTwo{
    width: 150px;
    height: 4px;
    border-radius: 2px;
    margin: 0 auto;
    margin-top:100px;
    position: relative;
    background: lightgreen;
    -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
    animation: changeBgColor 1.04s ease-in infinite alternate;
}
.loadingTwo span{
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: lightgreen;
    position: absolute;
    margin-top: -7px;
    margin-left:-8px;
    -webkit-animation: changePosition 1.04s ease-in infinite alternate;
    animation: changePosition 1.04s ease-in infinite alternate;
}
@-webkit-keyframes changeBgColor{
    0%{
        background: lightgreen;
    }
    100%{
        background: lightblue;
    }
}
@-webkit-keyframes changePosition{
    0%{
        background: lightgreen;
    }
    100%{
        margin-left: 142px;
        background: lightblue;
    }
}

html源码

<div class="loadingFour">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

加载5

在这里插入图片描述

css源码

.loadingFive{
    width: 150px;
    height: 15px;
    margin: 0 auto;
    margin-top:100px;
}
.loadingFive span{
    display: inline-block;
    width: 15px;
    height: 100%;
    margin-right: 5px;
    background: lightgreen;
    -webkit-transform-origin: right bottom;
    -webkit-animation: load 1s ease infinite;
}
.loadingFive span:last-child{
    margin-right: 0px;
}
@-webkit-keyframes load{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        -webkit-transform: rotate(90deg);
    }
}
.loadingFive span:nth-child(1){
    -webkit-animation-delay:0.13s;
}
.loadingFive span:nth-child(2){
    -webkit-animation-delay:0.26s;
}
.loadingFive span:nth-child(3){
    -webkit-animation-delay:0.39s;
}
.loadingFive span:nth-child(4){
    -webkit-animation-delay:0.52s;
}
.loadingFive span:nth-child(5){
    -webkit-animation-delay:0.65s;
}.loadingTwo{
    width: 150px;
    height: 4px;
    border-radius: 2px;
    margin: 0 auto;
    margin-top:100px;
    position: relative;
    background: lightgreen;
    -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
    animation: changeBgColor 1.04s ease-in infinite alternate;
}
.loadingTwo span{
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: lightgreen;
    position: absolute;
    margin-top: -7px;
    margin-left:-8px;
    -webkit-animation: changePosition 1.04s ease-in infinite alternate;
    animation: changePosition 1.04s ease-in infinite alternate;
}
@-webkit-keyframes changeBgColor{
    0%{
        background: lightgreen;
    }
    100%{
        background: lightblue;
    }
}
@-webkit-keyframes changePosition{
    0%{
        background: lightgreen;
    }
    100%{
        margin-left: 142px;
        background: lightblue;
    }
}.loadingFive{
    width: 150px;
    height: 15px;
    margin: 0 auto;
    margin-top:100px;
}
.loadingFive span{
    display: inline-block;
    width: 15px;
    height: 100%;
    margin-right: 5px;
    background: lightgreen;
    -webkit-transform-origin: right bottom;
    -webkit-animation: load 1s ease infinite;
}
.loadingFive span:last-child{
    margin-right: 0px;
}
@-webkit-keyframes load{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        -webkit-transform: rotate(90deg);
    }
}
.loadingFive span:nth-child(1){
    -webkit-animation-delay:0.13s;
}
.loadingFive span:nth-child(2){
    -webkit-animation-delay:0.26s;
}
.loadingFive span:nth-child(3){
    -webkit-animation-delay:0.39s;
}
.loadingFive span:nth-child(4){
    -webkit-animation-delay:0.52s;
}
.loadingFive span:nth-child(5){
    -webkit-animation-delay:0.65s;
}

html源码

<div class="loadingFive">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

加载6

在这里插入图片描述

css源码

.loadingSix{
    width: 100px;
    height: 100px;
    position: relative;
    margin: 0 auto;
    margin-top:100px;
}
.loadingSix span{
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: lightgreen;
    position: absolute;
    -webkit-animation: load 1.04s ease infinite;
}
@-webkit-keyframes load{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0.2;
    }
}
.loadingSix span:nth-child(1){
    left: 0;
    top: 50%;
    margin-top:-8px;
    -webkit-animation-delay:0.13s;
}
.loadingSix span:nth-child(2){
    left: 14px;
    top: 14px;
    -webkit-animation-delay:0.26s;
}
.loadingSix span:nth-child(3){
    left: 50%;
    top: 0;
    margin-left: -8px;
    -webkit-animation-delay:0.39s;
}
.loadingSix span:nth-child(4){
    top: 14px;
    right:14px;
    -webkit-animation-delay:0.52s;
}
.loadingSix span:nth-child(5){
    right: 0;
    top: 50%;
    margin-top:-8px;
    -webkit-animation-delay:0.65s;
}
.loadingSix span:nth-child(6){
    right: 14px;
    bottom:14px;
    -webkit-animation-delay:0.78s;
}
.loadingSix span:nth-child(7){
    bottom: 0;
    left: 50%;
    margin-left: -8px;
    -webkit-animation-delay:0.91s;
}
.loadingSix span:nth-child(8){
    bottom: 14px;
    left: 14px;
    -webkit-animation-delay:1.04s;
}

html源码

<div class="loadingSix">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

加载7

在这里插入图片描述

css源码

.loadingSeven{
    width: 80px;
    height: 40px;
    margin: 0 auto;
    margin-top:100px;
}
.loadingSeven span{
    display: inline-block;
    width: 8px;
    height: 100%;
    border-radius: 4px;
    background: lightgreen;
    -webkit-animation: loadsaven 1.04s ease infinite;
}
@-webkit-keyframes loadsaven{
    0%,100%{
        height: 40px;
        background: lightgreen;
    }
    50%{
        height: 60px;
        margin-top: -20px;
        background: lightblue;
    }
}
.loadingSeven span:nth-child(2){
    -webkit-animation-delay:0.13s;
}
.loadingSeven span:nth-child(3){
    -webkit-animation-delay:0.26s;
}
.loadingSeven span:nth-child(4){
    -webkit-animation-delay:0.39s;
}
.loadingSeven span:nth-child(5){
    -webkit-animation-delay:0.52s;
}

html源码

<div class="loadingSeven">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

加载8

在这里插入图片描述

css源码

.loadingEight{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto;
    margin-top:100px;
    position: relative;
    border:5px solid lightgreen;
    -webkit-animation: turn 2s linear infinite;
}
.loadingEight span{
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: lightgreen;
    position: absolute;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px;
    -webkit-animation: changeBgColor 2s linear infinite;
}
@-webkit-keyframes changeBgColor{
    0%{
        background: lightgreen;
    }
    100%{
        background: lightblue;
    }
}
@-webkit-keyframes turn{
    0%{
        -webkit-transform: rotate(0deg);
        border-color: lightgreen;
    }
    100%{
        -webkit-transform: rotate(360deg);
        border-color: lightblue;
    }
}

html源码

<div class="loadingEight">
    <span></span>
</div>

搬你想搬，盖你所需，码字不易，且行且珍惜！

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端开发

程序员

IT

CSS3

加载动画

十六种炫酷纯css加载动画（一）的相关文章

程序员必读书目推荐

1 Effective Java Joschua 稍许过时但没有替代java方面的书 2 Effectvie C Scott Meyer 3 More Effective C Scott Meyer的书是非常非常好书每次读都感到汗颜自

随机推荐

Vue 动态锚点

这是封装的组件判断容器的滚动接收父组件传来的Tab参数
Qt Quick里的图形效果——混合（Blend）

Blend 元素用指定的模式混合两个 Item 在我们使用 QPainter 绘图时支持 Composition Modes Blend 干的事儿与此类似使用 Blend 需要 import QtGraphicalEffects 1 0
IDEA导入MySQL的jdbc驱动出现“java.lang.ClassNotFoundException: com.mysql.cj.jdbc.Driver”

目录一一般的解决思路 1 JDBC下载链接 2 选择下载内容并进行下载 3 将驱动导入java项目二依然导入驱动失败怎么办当我们在idea中使用java操作mysql数据库时会出现 Exception in thread mai
自动驾驶多边形iou计算Shapely库笔记

参考 https cloud tencent com developer ask 42755 https blog csdn net u014421797 article details 89501572 https www itransl
MMDetection= Cuda10.0.130 + Pytorch1.4.0 + torchvision0.5.0 + mmcv-full1.1.6 + mmdet2.5.0

1 版本选取 MMDetection的版本选择安装的时候需要选择合适的版本下载不同版本的MMDetection 从 Github 的历史版本中选择合适的版本 https github com open mmlab mmdetectio
Python之线程编程（Thread）

线程基本概念 1 什么是线程 1 线程被称为轻量级的进程 2 线程也可以使用计算机多核资源是多任务编程方式 3 线程是系统分配内核的最小单元 4 线程可以理解为进程的分支任务 2 线程特征 1 一个进程中可以包含多个线程 2 线程也是一个
Untiy UDP局域网异步发送图片

同步画面有问题传图片吧 using System Text using System Net Sockets using System Collections using System Collections Generic using
WSL2 Ubuntu中apt update命令报错，无法解析域名解决方法

参考链接参考链接 1 sudo apt get update失败在ubuntu16中当我们输入sudo apt get update会失败这里有很多原因 1 网络原因先检查网络好不好用 2 ubuntu16 自带的源不好用或者有
大数据技术学习代码记录——Scala

文章目录一 Scala 二 Day01代码记录 2 1 HelloWord scala 2 1 1 TestHelloWorld scala 2 2 ifelse scala 2 3 PrintStudentInfo scala 三 Da
LayUI中的内置模块之常用元素操作 - layui.element

前言最近在准备找工作的事项但是作为一个后台也是需要了解一些前端框架的就目前的来说有大火的VUE 但是VUE还是存在一定的学习成本所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手后面会考虑使用VUE ElementUI
字符串压缩（小知识点）

当对字符串进行修改的时候需要使用 StringBuffer 和 StringBuilder 类和 String 类不同的是 StringBuffer 和 StringBuilder 类的对象能够被多次的修改并且不产生新的未使用对象
Maven 项目的配置与程序的运行

Maven 是一个 Java 包管理工具需要下载和安装通过配置 Maven 以后建立项目时就不需要再创建 lib 目录并导入相关的包只需要在它的配置文件 pom xml 文件中进行包的配置这样的配置方法提供了便利大大节约了资源在
Zookeeper入门

Zookeeper概念 Zookeeper是一个开源的分布式的项目是apache的一个项目从设计模式的角度理解 Zookeeper是基于观察者模式的它负责存储大家都关心的数据然后接受观察者的注册一旦这些数据发生变化则会通知已注
华为OD机试 - 区块链文件转储系统（Java）

题目描述区块链底层存储是一个链式文件系统由顺序的N个文件组成每个文件的大小不一依次为F1 F2 Fn 随着时间的推移所占存储会越来越大云平台考虑将区块链按文件转储到廉价的SATA盘只有连续的区块链文件才能转储到SATA盘上且
Unity Animation ---Unity中录制某个物体的运动到AnimationClip（一）

在某些情况下我们需要把物体的运动状态材质变化等信息录制下来存储到Clip中比如说用到ITween DoTween等插件控制物体运动然后想把运动的过程记录下来就需要在Editor Runtime下进行一些操作来达到我们的目的所幸
VsCode远程调试c++

1 WSL安装 ubuntu18 04 或者直接连接远程的ubuntu服务器 windows10 安装WSL 参考文档 Install WSL Microsoft Docs 开始使用 WSL VS Code Microsoft Docs i
jq单击button修改input的value

HTML代码 div 内容来源 div
【深度学习】基于卷积神经网络（tensorflow）的人脸识别项目（二）

活动地址 CSDN21天学习挑战赛目录前言基本思路关于环境通过anaconda导入配置数据集训练集验证机与测试集划分规则预处理从指定路径读取训练数据设置标签按照指定图像大小调整尺寸数据归一化最值归一化 norm
用户分享｜当我升级了 CloudQuery 2.2.0 后......

导读 7 月 13 日 CloudQuery 下文简称 CQ 2 2 0 版本正式发布在看到官方文档对新版本的介绍后马上进行安装测试本文主要为大家介绍从 CQ 1 4 2 升级到 2 2 的考量因素测试情况分享一些实践经验给大家
十六种炫酷纯css加载动画（一）

一个好的开篇会给你这个项目增加不少分值有没有遇到过打开页面加载一段时间页面内容才加载出来在等待加载的过程中页面却是空白页给用户的体验特别不好会让项目降一个档次下面的十六种炫酷炸裂的css加载动画会让你在等待的过程中体验视觉

十六种炫酷纯css加载动画（一）

加载1

css源码

html源码

加载2

css源码

html源码

加载3

css源码

html源码

加载4

css源码

html源码

加载5

css源码

html源码

加载6

css源码

html源码

加载7

css源码

html源码

加载8

css源码

html源码

十六种炫酷纯css加载动画（一） 的相关文章

随机推荐

热门标签

十六种炫酷纯css加载动画（一）的相关文章