CSS制作简单loading动画

  曾经以为,loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用“障眼法”做出来。比如一个旋转的圆圈,并不都是将gif图放进去,有些就是画个静止图像,然后让它旋转就完了。gif图也可以,但是加载时间比较长。

  CSS的animation可以做出大多数的loading,比如:

 

loading1:

1、HTML:

1 <div id="ddr">
2     <div class="ddr ddr1"></div>
3     <div class="ddr ddr2"></div>
4     <div class="ddr ddr3"></div>
5     <div class="ddr ddr4"></div>
6     <div class="ddr ddr5"></div>
7 </div>

2、CSS:

 1 #ddr{
 2     margin: 0 auto;
 3     width: 70px;
 4     height: 120px;
 5 }
 6 .ddr{
 7     width: 10px;
 8     height: 120px;
 9     float: left;
10     margin: 2px;
11     background-color: #00ff00;
12     animation: loading 1s infinite ease-in-out;/*animation:动画名称 持续时间 动画速度曲线 延迟 执行多少次 是否正反方向轮流播放*/
13 }
14 .ddr2{
15     animation-delay: -0.9s;/*定义开始执行的地方,负号表示直接从第900ms开始执行*/
16 }
17 .ddr3{
18     animation-delay: -0.8s;
19 }
20 .ddr4{
21     animation-delay: -0.7s;
22 }
23 .ddr5{
24     animation-delay: -0.6s;
25 }
26 @keyframes loading {
27     0%,40%,100%{ /*定义每帧的动作*/ 28         -webkit-transform: scaleY(0.5);
29     }
30     20%{
31         -webkit-transform: scaleY(1);
32     }
33 }

loading2:

1、HTML:

1 <div id="circle"></div>

2、CSS:

 1 #circle{
 2     margin: 20px auto;
 3     width: 100px;
 4     height: 100px;
 5     border: 5px white solid;
 6     border-left-color: #ff5500;
 7     border-right-color:#0c80fe;
 8     border-radius: 100%;
 9     animation: loading1 1s infinite linear;
10 }
11 @keyframes loading1{
12     from{transform: rotate(0deg)}to{transform: rotate(360deg)}
13 }

loading3:

1、HTML:

1 <div id="loader3">
2     <div id="loader3-inner"></div>
3 </div>

2、CSS:

 1 #loader3{
 2     box-sizing: border-box;
 3     position: relative;
 4     margin-left: 48%;
 5     transform: rotate(180deg);
 6     width: 50px;
 7     height: 50px;
 8     border: 10px groove rgb(170, 18, 201);
 9     border-radius: 50%;
10     animation: loader-3 1s ease-out alternate infinite;/* alternate表示则动画会在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等)反向播放 */
11 }
12 #loader3-inner{
13     box-sizing: border-box;
14     width: 100%;
15     height: 100%;
16     border: 0 inset rgb(170, 18, 201);
17     border-radius: 50%;
18     animation: border-zoom 1s ease-out alternate infinite;
19 }
20 @keyframes loader-3 {
21     0%{
22         transform: rotate(0deg);
23     }
24     100%{
25         transform: rotate(-360deg);
26     }
27 }
28 @keyframes border-zoom {
29     0%{
30         border-width: 0px;
31     }
32     100%{
33         border-width: 10px;
34     }
35 }

loading4:

1、HTML:

1 <div id="loading4">
2     <div id="loader4" class="heart"></div>
3 </div>

2、CSS:

 1 #loading4{
 2     width: 100%;
 3     height: 100px;
 4 }
 5 #loader4{
 6     position: relative;
 7     margin-left: calc(50% - 25px);
 8     width: 50px;
 9     height: 50px;
10     animation: loader-4 1s ease-in-out alternate infinite;
11 }
12 .heart:before{
13     position: absolute;
14     left: 11px;
15     content: "";
16     width: 50px;
17     height: 80px;
18     transform: rotate(45deg);
19     background-color: rgb(230, 6, 6);
20     border-radius: 50px 50px 0 0;
21 }
22 .heart:after{
23     position: absolute;
24     right: 11px;
25     content: "";
26     width: 50px;
27     height: 80px;
28     background-color: rgb(230, 6, 6);
29     transform: rotate(-45deg);
30     border-radius: 50px 50px 0 0;
31 }
32 @keyframes loader-4 {
33     0%{
34         transform: scale(0.2);
35         opacity: 0.5;
36     }
37     100%{
38         transform: scale(1);
39         opacity: 1;
40     }
41 }

 

环形进度条:

0、原理:

 (1)、

如图,先画一个正方形,这个正方形就是环形loading的轨道(现在还不是),再将一个圆放在上面,充当遮蔽物。

(2)、

CSS3有个clip属性,可以裁剪图像,将上面的圆裁为一半,假如这个圆的右半部分一直看不见,旋转左边这个半圆,会出现怎样的效果呢?

(3)、

如图,就是这种效果,这时候再加一个遮罩,就形成了下面这种效果:

(4)、

再将最下面的正方形变成圆形(变成真正的轨道),旋转橙色部分的圆环,底部青色的就会露出来,就形成了进度条的效果

(5)、

这是左边的一半,将右边的一半补齐:

(6)、

中间白色部分是mask,加上相应的文字,调整颜色就ok啦!

(7)、

1、HTML:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8   <title>Document</title>
 9   <link rel="stylesheet" href="progress.css">
10 </head>
11 
12 <body>
13   <div class="circle">
14     <div class="preLeft">
15       <div class="left"></div>
16     </div>
17     <div class="preRight">
18       <div class="right"></div>
19     </div>
20   </div>
21   <div class="mask">
22     <span class="progress">0</span>%
23   </div>
24   <script src="progress.js"></script>
25 </body>
26 
27 </html>

2、CSS:

 1 *{
 2   margin: 0;
 3   padding: 0;
 4 }
 5 .circle {
 6   width: 200px;
 7   height: 200px;
 8   border-radius: 50%;
 9   box-shadow: 0 0 7px 0px inset;
10   background:linear-gradient(#9ED110, #50B517, #179067, #476EAF, #9f49ac, #CC42A2, #FF3BA7, #FF5800, #FF8100, #FEAC00, #FFCC00, #EDE604);
11   filter: blur(8px);
12   transform: scale(1.1);
13   -webkit-mask: radial-gradient(black 30px, #0000 90px);
14 }
15 .preLeft{
16   position: absolute;
17   top: 0;
18   left: 0;
19   width: 200px;
20   height: 200px;
21   clip: rect(0, 100px, auto, 0);
22 }
23 .left{
24   position: absolute;
25   top: 0;
26   left: 0;
27   width: 200px;
28   height: 200px;
29   border-radius: 50%;
30   box-shadow: 0 0 3px 0px inset;
31   background: #fff;
32   transform: rotate(0deg);
33   clip: rect(0, 100px, auto, 0);
34 }
35 .preRight{
36   position: absolute;
37   top: 0;
38   left: 0;
39   width: 200px;
40   height: 200px;
41   clip: rect(0, auto, auto, 100px);
42 }
43 .right {
44   position: absolute;
45   top: 0;
46   left: 0;
47   width: 200px;
48   height: 200px;
49   border-radius: 50%;
50   box-shadow: 0 0 3px 0px inset;
51   background:#fff;
52   transform: rotate(0deg);
53   clip: rect(0, auto, auto, 100px);
54 }
55 .mask {
56   width: 150px;
57   height: 150px;
58   position: absolute;
59   left: 25px;
60   top: 25px;
61   border-radius: 50%;
62   /* box-shadow: 0 0 5px 0px; */
63   background: #FFF; 
64   text-align: center;
65   line-height: 150px;
66 }

3、JS:

 1 function init() {
 2   let left = document.getElementsByClassName('left')[0];
 3   let right = document.getElementsByClassName('right')[0];
 4   let progress = document.getElementsByClassName('progress')[0];
 5   let value = 0;
 6   let timer = setInterval(() => {
 7     if (progress.innerHTML < 100) {
 8       progress.innerHTML = value  ;
 9       if (value <= 50) {
10         right.style.transform = 'rotate('   (value * 3.6)   'deg)';
11       } else if (value <= 100) {
12         left.style.transform = 'rotate('   ((value - 50) * 3.6)   'deg)';
13       }
14     } else {
15       clearInterval(timer);
16     }
17   }, 100);
18 }
19 window.onload = function () {
20   init();
21 };

-

逢年过节,百度或者谷歌都会在首页播放一段动画,比如元宵节:

这个动画不仅仅是gif图,有时候是一张长长的包含所有帧的图片:

仿照animation一帧一桢的思路,可以将这张图片做成动画:

 1 #picHolder{
 2 /* 图片样式 */
 3     position: absolute;
 4     top: 17%;
 5     left: 50%;
 6     width: 270px;
 7     height: 129px;
 8     margin-left:-135px;
 9     background-image: url("../../../Library_image/tangyuan.png");
10     background-repeat: no-repeat;
11     background-position-x: 0;
12     cursor: pointer; 
13 }
 1 function animation () {
 2 /* 定时移动图片,使观众看到不同的帧 */
 3   var po = 0
 4   var i = 0
 5   var holder = document.getElementById('picHolder')
 6   setInterval(function () {
 7     po  = -270
 8     i  
 9     holder.style.backgroundPositionX = po   'px'
10     if (i >= 31) {
11       i = 0
12       po = 270
13     }
14   }, 100)
15 }
16 window.onload = function () {
17   animation()
18 }

不过有时候他们又会放上一张gif图,不懂他们的套路

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369961.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器学习:多变量线性回归

************************************** 注&#xff1a;本系列博客是博主学习Stanford大学 Andrew Ng 教授的《机器学习》课程笔记。博主深感学过课程后&#xff0c;不进行总结非常easy遗忘&#xff0c;依据课程加上自己对不明确问题的补充遂有此系列博客。本系列博客包含线性…

经过路由无法找到计算机,电脑无法启动服务提示系统找不到指定的路径(图)

原标题&#xff1a;"电脑无法启动服务提示系统找不到指定的路径"相关电脑问题教程分享。 - 来源:191路由网。众所周知&#xff0c;使用电脑的时候需要启动一些服务才能使用相关的功能&#xff0c;但是如果出现无法启动服务项&#xff0c;并且提示“错误3&#xff1a;…

详细解读css中的浮动以及清除浮动的方法

对于前端初学者来说&#xff0c;css浮动部分的知识是一块比较难以理解的部分&#xff0c;下面我将把我学习过程中的心得分享给大家。 导读&#xff1a; 1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后&#xff0c;如何清除浮动&#xff08;本文将涉及到多种清除浮动…

CSS多列布局(实例)

前言 一列布局二列布局三列布局 1 一列布局 一列布局&#xff1a; HTML部分 <!DOCTYPE html> <html> <head> <meta charset"utf-8" /> <title>一列布局</title> </head> <body> <div class"head">…

大头贴计算机教程,推荐!自家电脑也能拍大头贴的秘密

您可能感兴趣的话题&#xff1a;美图拍拍核心提示&#xff1a;一直都超爱拍大头贴&#xff0c;喜欢每张都能换不同的框框&#xff1b;喜欢可以直接看到效果&#xff0c;做出满意的动作&#xff1b;喜欢将大头贴和朋友们分享……不过夏日炎炎的&#xff0c;出门太麻烦&#xff0…

css选择器的综合使用

代码实现&#xff1a; 1 <!DOCTYPE html>2 <html lang"en">3 <head>4 <meta charset"utf-8">5 <title>css的综合使用</title>6 <style>7 div {8 colo…

启动tomcat时 一闪而过解决方法

【前文】 在实际开发中一般都是eclipsetomcat(也许还会用到tomcat的插件)&#xff0c;我们只需要在eclipse中单击servers上的按钮就可以成功启动tomcat了&#xff0c; 但是如果想在tomcat的安装目录下 双击startup.bat启动时却一闪而过了。这是为什么呢&#xff08;tomcat启动失…

复习HTML CSS(5)

n <meta>标记 <meta>的主要作用&#xff0c;是提供网页的源信息。比如&#xff1a;指定网页的搜索关键字 <meta>标记有两个属性&#xff1a;http-equiv和name。 1、 http-equiv属性 功能&#xff1a;模拟http协议文件头信息&#xff0c;当信息从服务器端传…

『cs231n』卷积神经网络工程实践技巧_下

概述 计算加速 方法一&#xff1a; 由于计算机计算矩阵乘法速度非常快&#xff0c;所以这是一个虽然提高内存消耗但是计算速度显著上升的方法&#xff0c;把feature map中的感受野&#xff08;包含重叠的部分&#xff0c;所以会加大内存消耗&#xff09;和卷积核全部拉伸成为向…

计算机扬天m400c联想,【联想扬天M参数】联想扬天M系列台式电脑参数-ZOL中关村在线...

CPU型号内存容量硬盘容量屏幕尺寸显卡类型 价格详细对比Intel 奔腾双核 E52002GB DDRII 667MHz250GB SATAII 7200转高速防震硬盘集成显卡对比Intel 奔腾4 631512MBGB 512MB DDRII53380GB 7200转集成显卡对比Intel Atom 2301GBGB DDRII160GB 7200转高速防震硬盘集成显卡对比Inte…

Spring Data JDBC通用DAO实现–迄今为止最轻量的ORM

我很高兴宣布Spring Data JDBC存储库项目的第一个版本。 这个开放源代码库的目的是为基于Spring框架中 JdbcTemplate关系数据库提供通用&#xff0c;轻量且易于使用的DAO实现&#xff0c;与项目的Spring Data 框架兼容。 设计目标 轻巧&#xff0c;快速且开销低。 只有少数几个…

【期望DP】

【总览】 【期望dp】 求解达到某一目标的期望花费&#xff1a;因为最终的花费无从知晓&#xff08;不可能从$\infty$推起&#xff09;&#xff0c;所以期望dp需要倒序求解。 设$f[i][j]$表示在$(i, j)$这个状态实现目标的期望值&#xff08;相当于是差距是多少&#xff09;。 首…

复习HTML CSS(2)

n 项目符号嵌套编号思路 标签的内容&#xff08;文本、项目符号、表格、图片等&#xff09;必须放在最底层标记中。 n 图片标记&#xff08;行内元素&#xff0c;单边标记&#xff09; l 语法&#xff1a;<img 属性 “值”> l 常用属性 Width&#xff1a;图片宽…

Spring MVC:使用基于Java的配置创建一个简单的Controller

这是我博客上与Spring MVC相关的第一篇文章。 开端总是令人兴奋的&#xff0c;因此我将尽量简洁明了。 Spring MVC允许以最方便&#xff0c;直接和快速的方式创建Web应用程序。 开始使用这项技术意味着需要Spring CORE的知识。 在文章中&#xff0c;您将了解有关创建简单的Spri…

2、创建分类器笔记

创建分类器 简介&#xff1a;分类是指利用数据的特性将其分类成若干类型的过程。分类与回归不同&#xff0c;回归的输出是实数。监督学习分类器就是用带标记的训练数 据建立一个模型&#xff0c;然后对未知的数据进行分类。分类器可以实现分类功能的任意算法&#xff0c;最简单…

复习上学期的HTML CSS(1)

自己跟着网上教程复习上学期的HTML CSS&#xff0c;因为已经忘得差不多了&#xff0c;而且现在学的js也要以HTML CSS为基础&#xff0c;坚持每天持续更新。 n B/S 网络结构 Browser/Server 浏览器/服务器&#xff0c;这是现在最流行的网络模式。如新浪网、凤凰网等。 C/S Clie…

星战前夜服务器维护时间,EVE星战前夜开测时间在什么时候 什么时候测试

EVE星战前夜什么时候开测&#xff0c;EVE星战前夜的测试时间在什么时候&#xff0c;想要知道EVE星战前夜测试时间的小伙伴一起来看看EVE星战前夜的相关资讯&#xff0c;了解一下游戏的开测时间吧。EVE星战前夜目前仍在开发阶段&#xff0c;目前没有进行大范围的测试&#xff0c…

3、预测模型笔记

预测模型 1、简介 预测建模&#xff08;Predictive modeling&#xff09;是一种用来预测系统未来行为的分析技术&#xff0c;它由一群能够识别独立输入变量与反馈目标关联关系的算法构成。根据观测值创建一个数学模型&#xff0c;然后用这个模型去预测未来发生的事情。 预测模型…

常见问题_智能切膜机常见问题

hoco.智能切膜机&#xff0c;如果使用了错误方式&#xff0c;会导致操作失误&#xff0c;整理4个常见问题&#xff0c;还有错误示范&#xff0c;请跟随视频去了解&#xff0c;你使用正确了吗?1. 膜切反这个需要留意切割膜的正反&#xff0c;有文字面就是正面&#xff0c;无文字…

bootstrap的栅格系统和响应式工具

关于bootstrap的响应式布局&#xff0c;昨天看了杨老师的视频教学https://www.bilibili.com/video/av18357039豁然开朗&#xff0c;在这里记录一下 一&#xff1a;meta标签的引用 <meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" conte…