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/ ...
随机推荐
- Linux内核同步：per_cpu变量
per cpu变量相关函数和宏 DEFINE_PER_CPU_SHARED_ALIGNED(type,name):静态分配per_cpu数组,数组名为name,结构类型为type DEFINE_PER ...
- 解决高分屏/高DPI下GNOME3/Linux字体和按钮太小的问题
更改系统设置就好了. 我的设备是Surface Pro,12英寸,分辨率2736x1824,在虚拟机里安装CentOS 7后字特别小,标题栏的最小化/最大化/关闭按钮也很小,眼睛受不了的. 更改两个设 ...
- 如何在redhat 7上安装VNC服务器
平时我们基本上都是用xshell或者用putty远程我们的linux服务器,如果我们的linux服务器安装了图型化界面那我们又该如何远程使用我们的图形化界面呢?下面我们用vnc来实现远程我们的linu ...
- centos中安装jdk
1.上传jdk安装文件到根目录 2.解压到相关目录 (1)创建相应目录mkdir -p /usr/local/java (2)解压 tar -zxvf jdk-7u80-linux-x64.tar.g ...
- Maven学习总结（9）——使用Nexus搭建Maven私服
1 . 私服简介 私服是架设在局域网的一种特殊的远程仓库,目的是代理远程仓库及部署第三方构件.有了私服之后,当 Maven 需要下载构件时,直接请求私服,私服上存在则下载到本地仓库:否则,私服请求外部 ...
- Ubuntu 安装有道词典
本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/51302546 官网首页:有道词典 其中 ...
- noip2013 Day2 T2 花匠 解题报告
题目: 3289 花匠 2013年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目描述 Description 花匠栋栋种了一排花,每株花都有自己的高度.花儿越长越大, ...
- Linux下diff与patch命令的配合使用
在Linux下,diff与patch命令配合使用可以进行简单的代码维护工作. [A] diff diff命令用于比较文件的差异,可以用于制作patch文件.但此命令参数众多.格式多样,所以在此仅介绍较 ...
- 这书真的不错--Spring MVC Beginner's Guide
五百多页,我干到三百多页了. 每个知识点都有说明,操作,解释. 学SPRING MVC,有它就够了. 遗憾的是,这个PDF的文档格式太稀松啦,且,无中文版~~~ 我都想作汉化翻译工作了...算了,忍住 ...
- 1393 0和1相等串 51nod
1393 0和1相等串 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题 收藏 关注 给定一个0-1串,请找到一个尽可能长的子串,其中包含的0与1的个数相等. I ...