CSS制作简单loading动画
曾经以为，loading的制作需要一些比较高深的web动画技术，后来发现大多数loading都可以用“障眼法”做出来。比如一个旋转的圆圈，并不都是将gif图放进去，有些就是画个静止图像，然后让它旋转就完了。gif图也可以，但是加载时间比较长。
CSS的animation可以做出大多数的loading，比如：
loading1：
1、HTML：
<div id="ddr">
<div class="ddr ddr1"></div>
<div class="ddr ddr2"></div>
<div class="ddr ddr3"></div>
<div class="ddr ddr4"></div>
<div class="ddr ddr5"></div>
</div>
2、CSS：
#ddr{
margin: 0 auto;
width: 70px;
height: 120px;
}
.ddr{
width: 10px;
height: 120px;
float: left;
margin: 2px;
background-color: #00ff00;
animation: loading 1s infinite ease-in-out;/*animation：动画名称 持续时间 动画速度曲线 延迟 执行多少次 是否正反方向轮流播放*/
}
.ddr2{
animation-delay: -0.9s;/*定义开始执行的地方，负号表示直接从第900ms开始执行*/
}
.ddr3{
animation-delay: -0.8s;
}
.ddr4{
animation-delay: -0.7s;
}
.ddr5{
animation-delay: -0.6s;
}
@keyframes loading {
0%,40%,100%{ /*定义每帧的动作*/
-webkit-transform: scaleY(0.5);
}
20%{
-webkit-transform: scaleY(1);
}
}
loading2：
1、HTML：
<div id="circle"></div>
2、CSS：
#circle{
margin: 20px auto;
width: 100px;
height: 100px;
border: 5px white solid;
border-left-color: #ff5500;
border-right-color:#0c80fe;
border-radius: 100%;
animation: loading1 1s infinite linear;
}
@keyframes loading1{
from{transform: rotate(0deg)}to{transform: rotate(360deg)}
}
loading3：
1、HTML：
<div id="loader3">
<div id="loader3-inner"></div>
</div>
2、CSS：
#loader3{
box-sizing: border-box;
position: relative;
margin-left: 48%;
transform: rotate(180deg);
width: 50px;
height: 50px;
border: 10px groove rgb(170, 18, 201);
border-radius: 50%;
animation: loader-3 1s ease-out alternate infinite;/* alternate表示则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）反向播放 */
}
#loader3-inner{
box-sizing: border-box;
width: 100%;
height: 100%;
border: 0 inset rgb(170, 18, 201);
border-radius: 50%;
animation: border-zoom 1s ease-out alternate infinite;
}
@keyframes loader-3 {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(-360deg);
}
}
@keyframes border-zoom {
0%{
border-width: 0px;
}
100%{
border-width: 10px;
}
}
loading4：
1、HTML：
<div id="loading4">
<div id="loader4" class="heart"></div>
</div>
2、CSS：
#loading4{
width: 100%;
height: 100px;
}
#loader4{
position: relative;
margin-left: calc(50% - 25px);
width: 50px;
height: 50px;
animation: loader-4 1s ease-in-out alternate infinite;
}
.heart:before{
position: absolute;
left: 11px;
content: "";
width: 50px;
height: 80px;
transform: rotate(45deg);
background-color: rgb(230, 6, 6);
border-radius: 50px 50px 0 0;
}
.heart:after{
position: absolute;
right: 11px;
content: "";
width: 50px;
height: 80px;
background-color: rgb(230, 6, 6);
transform: rotate(-45deg);
border-radius: 50px 50px 0 0;
}
@keyframes loader-4 {
0%{
transform: scale(0.2);
opacity: 0.5;
}
100%{
transform: scale(1);
opacity:;
}
}
环形进度条：
0、原理：
(1)、
如图，先画一个正方形，这个正方形就是环形loading的轨道（现在还不是），再将一个圆放在上面，充当遮蔽物。
(2)、
CSS3有个clip属性，可以裁剪图像，将上面的圆裁为一半，假如这个圆的右半部分一直看不见，旋转左边这个半圆，会出现怎样的效果呢？
(3)、
如图，就是这种效果，这时候再加一个遮罩，就形成了下面这种效果：
(4)、
再将最下面的正方形变成圆形（变成真正的轨道），旋转橙色部分的圆环，底部青色的就会露出来，就形成了进度条的效果
(5)、
这是左边的一半，将右边的一半补齐：
(6)、
中间白色部分是mask，加上相应的文字，调整颜色就ok啦！
(7)、
1、HTML:
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="progress.css">
</head> <body>
<div class="circle">
<div class="preLeft">
<div class="left"></div>
</div>
<div class="preRight">
<div class="right"></div>
</div>
</div>
<div class="mask">
<span class="progress">0</span>%
</div>
<script src="progress.js"></script>
</body> </html>
2、CSS:
*{
margin:;
padding:;
}
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: 0 0 7px 0px inset;
background:linear-gradient(#9ED110, #50B517, #179067, #476EAF, #9f49ac, #CC42A2, #FF3BA7, #FF5800, #FF8100, #FEAC00, #FFCC00, #EDE604);
filter: blur(8px);
transform: scale(1.1);
-webkit-mask: radial-gradient(black 30px, #0000 90px);
}
.preLeft{
position: absolute;
top:;
left:;
width: 200px;
height: 200px;
clip: rect(0, 100px, auto, 0);
}
.left{
position: absolute;
top:;
left:;
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: 0 0 3px 0px inset;
background: #fff;
transform: rotate(0deg);
clip: rect(0, 100px, auto, 0);
}
.preRight{
position: absolute;
top:;
left:;
width: 200px;
height: 200px;
clip: rect(0, auto, auto, 100px);
}
.right {
position: absolute;
top:;
left:;
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: 0 0 3px 0px inset;
background:#fff;
transform: rotate(0deg);
clip: rect(0, auto, auto, 100px);
}
.mask {
width: 150px;
height: 150px;
position: absolute;
left: 25px;
top: 25px;
border-radius: 50%;
/* box-shadow: 0 0 5px 0px; */
background: #FFF;
text-align: center;
line-height: 150px;
}
3、JS:
function init() {
let left = document.getElementsByClassName('left')[0];
let right = document.getElementsByClassName('right')[0];
let progress = document.getElementsByClassName('progress')[0];
let value = 0;
let timer = setInterval(() => {
if (progress.innerHTML < 100) {
progress.innerHTML = value++;
if (value <= 50) {
right.style.transform = 'rotate(' + (value * 3.6) + 'deg)';
} else if (value <= 100) {
left.style.transform = 'rotate(' + ((value - 50) * 3.6) + 'deg)';
}
} else {
clearInterval(timer);
}
}, 100);
}
window.onload = function () {
init();
};
-
逢年过节，百度或者谷歌都会在首页播放一段动画，比如元宵节：
这个动画不仅仅是gif图，有时候是一张长长的包含所有帧的图片：
仿照animation一帧一桢的思路，可以将这张图片做成动画：
#picHolder{
/* 图片样式 */
position: absolute;
top: 17%;
left: 50%;
width: 270px;
height: 129px;
margin-left:-135px;
background-image: url("../../../Library_image/tangyuan.png");
background-repeat: no-repeat;
background-position-x:;
cursor: pointer;
}
function animation () {
/* 定时移动图片，使观众看到不同的帧 */
var po = 0
var i = 0
var holder = document.getElementById('picHolder')
setInterval(function () {
po += -270
i++
holder.style.backgroundPositionX = po + 'px'
if (i >= 31) {
i = 0
po = 270
}
}, 100)
}
window.onload = function () {
animation()
}
不过有时候他们又会放上一张gif图，不懂他们的套路
CSS制作简单loading动画的更多相关文章
- css制作简单loading动画效果【css3 loading加载动画】
曾经以为,loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用“障眼法”做出来.比如一个旋转的圆圈,并不都是将gif图放进去,有些就是画个静止图像,然后让它旋转就 ...
- 纯css去实现loading动画效果图
当项目中加载内容慢的的时候,需要显示一个loading动画效果图 之前我们使用的是一圈点点旋转的效果,现在设计修改为,如下gif图片效果-------------------------------- ...
- CSS制作简单图标
CSS制作图标包括知识点如border-width.border-style.border-color.border-radius.对元素的定位拼接.旋转等结合起来. 图标效果如下(拖动滑块可缩放图标 ...
- 利用 css 制作简单的提示框
在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...
- 用CATransform3D实现3D效果和制作简单3D动画
我们先来看下CATransform3D的头文件 struct CATransform3D { CGFloat m11, m12, m13, m14; CGFloat m21, m22, m23, m2 ...
- 用Laya制作简单的动画
(function () { var layaGameInit = window.layaGameInit || {}; var WebGL = Laya.WebGL; var Browser = L ...
- js+css制作简单的轮播图带有定时功能
用纯css和JavaScript代码制作带有定时轮播功能的轮播图 <!DOCTYPE html> <html> <head> <meta charset=&q ...
- css制作简单的导航栏
//css代码 #menu{ height: 65px; width:100%; background-color: rgba(0, 0, 0, 0.5);}#menu ul{ list-style: ...
- 使用div+css制作简单导航 以及要注意问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 洛谷——P4014 分配问题
P4014 分配问题 题目描述 有 nn 件工作要分配给 nn 个人做.第 ii 个人做第 jj 件工作产生的效益为 c_{ij}cij .试设计一个将 nn 件工作分配给 nn 个人做的分配方案, ...
- Dinic当前弧优化 模板及教程
在阅读本文前,建议先自学最大流的Ek算法. 引入 Ek的核心是执行bfs,一旦找到增广路就停下来进行增广.换言之,执行一遍BFS执行一遍DFS,这使得效率大大降低.于是我们可以考虑优化. 核心思路 在 ...
- postgres主从配置
运维开发技术交流群欢迎大家加入一起学习(QQ:722381733) 开始部署postgres主从(如果没不会安装postgres的请去上一个博文中查看) 这里我使用了两台服务器部署 主:192.168 ...
- （44）. Spring Boot日志记录SLF4J【从零开始学Spring Boot】
在开发中打印内容,使用 System.out.println() 和 Log4j 应当是人人皆知的方法了. 其实在开发中我们不建议使用 System.out 因为大量的使用 System.out 会增 ...
- A - Number Sequence
Given two sequences of numbers : a11, a22, ...... , aNN, and b11, b22, ...... , bMM(1 <= M <= ...
- Hibernate数据缓存攻略
目录 第一章 缓存策略概述 第二章 hibernate不使用缓存的问题 第三章 一级缓存介绍 第四章 二级缓存 第五章 一二级缓存对比及总结 源代码: https://github.com/weili ...
- Android測试环境变量配置表
要改动的文件是~/bash_profile这个配置文件,内容例如以下: # Setting PATH for Java JAVA_HOME="/Library/Java/JavaVirtua ...
- ubuntu上java的开发环境 jdk 的安装
jre下载路径: https://java.com/zh_CN/download/manual.jsp jdk下载路径:http://www.oracle.com/technetwork/java/j ...
- T470 Win10下触摸板手势
T470 Win10下触摸板手势 学习了:https://forum.51nb.com/thread-1742490-1-1.html 三指横向竟然是alt+tab 学习了:http://www.xi ...
- Sahara中的数据模型
声明: 本博客欢迎转载.但请保留原作者信息,并请注明出处! 作者:郭德清 团队:华为杭州OpenStack团队 本文主要是介绍下Sahara中一些常见的数据模型. 1.Config 用于描写叙述配置信 ...