CSS3学习记录之loading动画
loading动画就是在加载一些网页内容的时候呈现出来的小动画，记录一下学到的几种loading动画：
效果：http://39.105.101.122/myhtml/CSS/Loading/loading.html
第一个是一个圆形的一部分在旋转，实现原理：
在相应的位置添加一个 i 标签，然后设置width和height（值一样），然后添加border-radius：50%，此时这个i标签呈现出来的是一个圆，为了和图示效果一样，需要把这个圆遮住多半个，用background: linear-gradient(transparent 0%, transparent 70%, #333 70%, #333 100%);这样用背景过渡的方法就让上面70%透明掉了。然后添加动画:0%{rotate(0deg)} 50%{rotate(180deg)} 100%{rotate(360deg)}, animation: loading-1 .2s linear 0s infinite;//循环播放。
第二个是几个竖线在不停的伸缩，实现原理：
在相应的位置添加若干个 i 标签，这里添加了6个，i 标签是行内元素，因此他们可以在一行内，设置margin-right，width为4像素，height可以自己随便定义。然后添加颜色等属性。然后定义一个动画。
@keyframes loading-2{
0%{
transform: scaleY(1);
}
50%{
transform: scaleY(0.4);
}
100%{
transform: scaleY(1);
}
}
0%和100%的时候值要一样，这样才能平滑过渡。50%的时候可以伸缩相应的值。然后给每个 i 标签添加动画属性：animation: loading-2 1s ease-in .1s infinite;
一个动画循环是1s，0.1s延迟，循环播放，每个 i 标签的动画延迟时间递增一点，显示的结果就会呈现出波浪的效果。
第三个是围成一个圆的8个小圆在不停从大变小同时颜色由深变浅，这个原理和第二个是相同的，先添加8个 i 标签，设置position：absolute，width、height、border-radius、颜色、它的父级div不设置width和height，这样没有宽度和高度的父级div的左上角也是居中的，然后给每个 i 标签设置相应的top和left，也就是围着中心点均匀绕开。这样就完成了布局。然后添加动画：
@keyframes loading-3{
0%{
/*background: linear-gradient(transparent 0%);*/
opacity: 1;
transform: scale(2);
}
100%{
/*background: linear-gradient(transparent 0%,transparent 100%);*/
transform: scale(0.5);
opacity: 0;
}
}
在0%的时候opacity：1（不透明度是1，即完全不透明），scale（2），大小为原大小的两倍，100%的时候opacity为0，完全透明，大小为原大小的一半，这样就能实现一边变小同时颜色变淡的效果。然后给 i 标签添加：animation: loading-3 .8s ease-in .1s infinite;每个 i 标签的延迟时间是递增的，并且递增到0.8s和一个循环的动画时间一样，这样才能保证只有一个最大的，后面的都是逐渐缩小的，如果想让在打开页面之后动画就是播放着的，可以给第一个延迟时间改成-0.8s，后面的递增0.1s即可。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
.box{
width: 100%;
padding: 3%;
/*margin: 100px auto;*/
box-sizing: border-box;
overflow: hidden;
/*background-color: #ccc;*/
}
.loader{
width: 30%;
height: 200px;
/*background-color: #fff;*/
border: 1px solid #ccc;
float: left;
margin-right: 3%;
box-sizing: border-box;
position: relative;
display: flex;
align-items: center;
justiy-content: center;
}
@keyframes loading-1{
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(180deg);
}
100%{
transform: rotate(360deg);
}
}
.loading_1{
width: 35px;
height: 35px;
margin: auto;
border-radius: 50%;
position: relative;
background-color: #000;
/*display: block;*/
background: linear-gradient(transparent 0%, transparent 70%, #333 70%, #333 100%);
animation: loading-1 .2s linear 0s infinite;
}
@keyframes loading-2{
0%{
transform: scaleY(1);
} 50%{
transform: scaleY(0.4);
} 100%{
transform: scaleY(1);
}
}
.loading_2{
width: auto;
height: 35px;
margin: auto;
/*background-color: #000;*/
}
.loading_2 i{
width: 4px;
height: 35px;
border-radius: 2px;
margin-right: 4px;
margin-left: 4px;
background-color: #000;
float: left;
}
.loading_2 i:nth-child(1){
animation: loading-2 1s ease-in .1s infinite;
}
.loading_2 i:nth-child(2){
animation: loading-2 1s ease-in .2s infinite;
}
.loading_2 i:nth-child(3){
animation: loading-2 1s ease-in .3s infinite;
}
.loading_2 i:nth-child(4){
animation: loading-2 1s ease-in .4s infinite;
}
.loading_2 i:nth-child(5){
animation: loading-2 1s ease-in .5s infinite;
}
.loading_2 i:nth-child(6){
animation: loading-2 1s ease-in .6s infinite;
}
@keyframes loading-3{
0%{
/*background: linear-gradient(transparent 0%);*/
opacity: 1;
transform: scale(2);
}
100%{
/*background: linear-gradient(transparent 0%,transparent 100%);*/
transform: scale(0.5);
opacity: 0;
}
}
.loading_3{
/*padding: 2px;*/
width: 30px;
height: 30px;
margin: auto;
background-color: #000;
position: relative;
}
.loading_3 i{
width: 8px;
height: 8px;
border-radius: 4px;
position: absolute;
/*clear: both;*/
display: block;
background-color: black;
}
.loading_3 i:nth-child(1){
top: 25px;
left: 0px;
background: red;
animation: loading-3 .8s ease-in .1s infinite;
}
.loading_3 i:nth-child(2){
top: 17px;
left: 17px;
background: #ff6600;
animation: loading-3 .8s ease-in .2s infinite;
}
.loading_3 i:nth-child(3){
top: 0px;
left: 25px;
background: yellow;
animation: loading-3 .8s ease-in .3s infinite;
}
.loading_3 i:nth-child(4){
top: -17px;
left: 17px;
background: green;
animation: loading-3 .8s ease-in .4s infinite;
}
.loading_3 i:nth-child(5){
top: -25px;
left: 0px;
background: #00ffff;
animation: loading-3 .8s ease-in .5s infinite;
}
.loading_3 i:nth-child(6){
top: -17px;
left: -17px;
background: blue;
animation: loading-3 .8s ease-in .6s infinite;
}
.loading_3 i:nth-child(7){
top: 0px;
left: -25px;
background: #ff00ff;
animation: loading-3 .8s ease-in .7s infinite;
}
.loading_3 i:nth-child(8){
top: 17px;
left: -17px;
background: #ff0099;
animation: loading-3 .8s ease-in .8s infinite;
}
</style>
<body>
<div class="box">
<div class="loader">
<i class="loading_1"></i>
</div>
<div class="loader">
<div class="loading_2">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
<div class="loader">
<div class="loading_3">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
</div>
</body>
</html>
CSS3学习记录之loading动画的更多相关文章
- CSS3学习笔记之loading动画
效果截图: HTML代码: <div class="divBox"> <div class="loader"> <div clas ...
- HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
- CSS3学习总结3-3D与动画
前言:这是篇CSS3中关于3D效果与动画相关的内容. (1)在CSS3的3D效果中,需要结合透视perspective的属性才能看到3d的效果,这个属性在屏幕上实现了元素近大远小的效果,所以要使用CS ...
- 纯css3 加载loading动画特效
最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...
- loading动画效果记录
看到好多网页都有一个炫酷的loading动画,以前不知道怎么实现的.今天学习了一下,发现其实也很简单. 首先在学习的时候偶然遇到一个pace.js的库,非常好用.优点是,不需要挂接到任何代码,自动检测 ...
- css3波浪形loading动画
css3做个第一个动画,主要点在box-shadow和background的变化,虽然不难,但是还是有一定的技巧性的!备注下 html <div class="loading" ...
- CSS3效果：animate实现点点点loading动画效果（二）
box-shadow实现的打点效果 简介 box-shadow理论上可以生成任意的图形效果,当然也就可以实现点点点的loading效果了. 实现原理 html代码,首先需要写如下html代码以及cla ...
- 简单的CSS3 Loading动画
最终效果如图一,gif图片稍微有点卡顿,事实上代码在浏览器里执行得很流畅.这里面用到的css3技术非常简单,分别是border-radius.伪元素.css3关键帧以及animation动画. 首先整 ...
- 纯CSS3文字Loading动画特效
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载
- 10种CSS3实现的loading动画，挑一个走吧？
这篇文章主要介绍了10种CSS3实现的loading动画,帮助大家更好的美化自身网页,完成需求,感兴趣的朋友可以了解下. HTML: 1 <body> 2 <div class=&q ...
随机推荐
- 来自jackson的灵魂一击：@ControllerAdvice就能保证万无一失吗？
前几天写了篇关于fastjson的文章,<fastjson很好,但不适合我>.里面探讨到关于对象循环引用的序列化问题.作为spring序列化的最大竞品,在讨论fastjson的时候肯定要对 ...
- 搭建私有YUM仓库_及_内网镜像站
搭建私有YUM仓库_及_内网镜像站 搭建私有YUM仓库(自己定制的rpm包)私有yum仓库环境系统版本:centos7.4 IP:192.168.1.47 #最好能上公网 私有yum仓库服务端配置 第 ...
- 前端里那些你不知道的事儿之 【window.onload】
作者:京东科技 孙凯 一.前言 相信很多前端开发者在做项目时同时也都做过页面性能优化,这不单是前端的必备职业技能,也是考验一个前端基础是否扎实的考点,而性能指标也通常是每一个开发者的绩效之一.尤其马上 ...
- day8:列表相关函数&深浅拷贝&字典相关函数&集合相关操作/函数
字符串/列表/字典/集合 目录 字符串相关操作: 拼接 重复 跨行拼接 索引 切片字符串相关函数:常规11+is系列3+填充去除6+最重要3字符串拓展:字符串的格式化format 列表的相关操作:拼接 ...
- 太坑了吧！一次某某云上的redis读超时排查经历
一次排查某某云上的redis读超时经历 性能排查,服务监控方面的知识往往涉及量广且比较零散,如何较为系统化的分析和解决问题,建立其对性能排查,性能优化的思路,我将在这个系列里给出我的答案. 问题背景 ...
- 部署：mysql搭建多主一从源复制环境
问题描述:搭建过一主多从的环境,由于数据库数据一致性要求高,有些情景会搭建一主多从的架构,搭建多主一从的模式,相对来说适合数据整合,将多个业务的库整合到一起,方便做查询,也可以当做一个监控其他主库数据 ...
- fio性能测试-环境搭建，功能介绍，测试讲解
fio性能测试-环境搭建,功能介绍,测试讲解 Fio介绍:FIO(Flexible I/O Tester)是一个用于测试磁盘.文件系统.块设备和网络设备性能的工具.它可以模拟不同类型的I/O负载,包括 ...
- 轻量级Web框架Flask（二）
Flask-SQLAlchemy MySQL是免费开源软件,大家可以自行搜索其官网(https://www.MySQL.com/downloads/) 测试MySQL是否安装成功 在所有程序中,找到M ...
- 尝试CentOS8---部署集群(生产环境7.9为好)
一.LVS集群简介 什么是集群 通过网络将很多服务器集中起来,提供同一种服务,在客户端看来就像是只有一个服务器 二.LVS-NAT集群 1.环境准备 启动3台虚拟机,禁用selinux和firewal ...
- Array.prototype.at。Arrat和 String 中的 at 方法
一篇有关新 js 特性 at 方法的思考 入参只能是number 类型,允许入参有小数(按照 chrome DevTools Console 测试确实可以带小数) 有返回值,如果对应下标在实例中存在, ...