网站开发软件解决方案,公司起名大全2023最新版的免费,重庆最大的本地交流网站,扬州市网站建设工作室曾经以为#xff0c;loading的制作需要一些比较高深的web动画技术#xff0c;后来发现大多数loading都可以用“障眼法”做出来。比如一个旋转的圆圈#xff0c;并不都是将gif图放进去#xff0c;有些就是画个静止图像#xff0c;然后让它旋转就完了。gif图也可以#xff… 曾经以为loading的制作需要一些比较高深的web动画技术后来发现大多数loading都可以用“障眼法”做出来。比如一个旋转的圆圈并不都是将gif图放进去有些就是画个静止图像然后让它旋转就完了。gif图也可以但是加载时间比较长。 CSS的animation可以做出大多数的loading比如 loading1
1、HTML 1 div idddr
2 div classddr ddr1/div
3 div classddr ddr2/div
4 div classddr ddr3/div
5 div classddr ddr4/div
6 div classddr 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 idcircle/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 idloader3
2 div idloader3-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 idloading4
2 div idloader4 classheart/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 html2 html langen3 4 head5 meta charsetUTF-86 meta nameviewport contentwidthdevice-width, initial-scale1.07 meta http-equivX-UA-Compatible contentieedge8 titleDocument/title9 link relstylesheet hrefprogress.css
10 /head
11
12 body
13 div classcircle
14 div classpreLeft
15 div classleft/div
16 /div
17 div classpreRight
18 div classright/div
19 /div
20 /div
21 div classmask
22 span classprogress0/span%
23 /div
24 script srcprogress.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 04 var i 05 var holder document.getElementById(picHolder)6 setInterval(function () {7 po -2708 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图不懂他们的套路
