中国建设银行官方网站,长沙网页设计工资高吗,北京软件开发公司,网站优化建设河南前言 现如今网页越来越趋近于动画#xff0c;相信大家平时浏览网页或多或少都能看到一些动画效果#xff0c;今天我们来做一个有意思的动画效果#xff0c;纯 css 实现 loading 加载中#xff08;多种展现形式#xff09;#xff0c;下面一起看看吧。 1. 常规 loading 实…前言 现如今网页越来越趋近于动画相信大家平时浏览网页或多或少都能看到一些动画效果今天我们来做一个有意思的动画效果纯 css 实现 loading 加载中多种展现形式下面一起看看吧。 1. 常规 loading 实现效果 代码如下 templatediv classparentBoxdiv classloadBoxdiv classloaderContantBox/div/div/div
/template
style langless scoped
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 100px;.loadBox .loaderContantBox {color: white;font-size: 40px;overflow: hidden;width: 40px;height: 40px;border-radius: 50%;transform: translateZ(0);/* animation规定完成动画所花费的时间该属性必须规定否则动画时长为0无法播放 */animation: loadBox 1.7s infinite ease, round 1.7s infinite ease;}keyframes loadBox {0% {box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;}5%,95% {box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;}10%,59% {box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em,-0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em,-0.297em -0.775em 0 -0.477em;}20% {box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,-0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,-0.749em -0.34em 0 -0.477em;}38% {box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,-0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,-0.82em -0.09em 0 -0.477em;}100% {box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;}}keyframes round {0% {transform: rotate(0deg); /* 开始旋转 div 元素 */}100% {transform: rotate(360deg); /* 结束旋转 div 元素 */}}
}
/style2. 抛出线条式 loading 实现效果 代码如下 templatediv classparentBoxsvg classscalableBox viewBox0 0 128 256 width128px height256px xmlnshttp://www.w3.org/2000/svgdefslinearGradient idap-grad1 x10 y10 x20 y21stop offset0% stop-colorhsl(223,90%,55%) /stop offset100% stop-colorhsl(253,90%,55%) //linearGradientlinearGradient idap-grad2 x10 y10 x20 y21stop offset0% stop-colorhsl(193,90%,55%) /stop offset50% stop-colorhsl(223,90%,55%) /stop offset100% stop-colorhsl(253,90%,55%) //linearGradient/defscircle classapringBox r56 cx64 cy192 fillnone stroke#ddd stroke-width16 stroke-linecapround /circle classapwormOneBox r56 cx64 cy192 fillnone strokeurl(#ap-grad1) stroke-width16 stroke-linecaproundstroke-dasharray87.96 263.89 /path classapwormTwoBox dM120,192A56,56,0,0,1,8,192C8,161.07,16,8,64,8S120,161.07,120,192Z fillnone strokeurl(#ap-grad2)stroke-width16 stroke-linecapround stroke-dasharray87.96 494 //svg/div
/template
style langless scoped
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 100px;.scalableBox {width: 40px;height: 70px;}.apringBox {transition: stroke 0.3s;}.apwormOneBox,.apwormTwoBox {animation-duration: 3s;animation-iteration-count: infinite;}.apwormTwoBox {animation-name: worm2;visibility: hidden;}.apwormOneBox {animation-name: worm1;}
}media (prefers-color-scheme: dark) {:root {--bg: hsl(var(--hue), 10%, 10%);--fg: hsl(var(--hue), 10%, 90%);}.apringBox {stroke: hsla(var(--hue), 10%, 90%, 0.9);}
}keyframes worm1 {from {animation-timing-function: ease-in-out;stroke-dashoffset: -87.96;}20% {animation-timing-function: ease-in;stroke-dashoffset: 0;}60% {stroke-dashoffset: -791.68;visibility: visible;}60.1%,to {stroke-dashoffset: -791.68;visibility: hidden;}
}keyframes worm2 {from,60% {stroke-dashoffset: -87.96;visibility: hidden;}60.1% {animation-timing-function: cubic-bezier(0, 0, 0.5, 0.75);stroke-dashoffset: -87.96;visibility: visible;}77% {animation-timing-function: cubic-bezier(0.5, 0.25, 0.5, 0.88);stroke-dashoffset: -340;visibility: visible;}to {stroke-dashoffset: -669.92;visibility: visible;}
}
/style3. 进度条颜色覆盖式 loading 实现效果 代码如下 templatediv classparentBoxdiv classcontantBox/div/div
/template
style langless scoped
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 100px;.contantBox {width: 120px;height: 20px;background: linear-gradient(rgb(12, 132, 223) 0 0) 0/0% no-repeat #ddd;animation: cartoon 2s infinite linear;}keyframes cartoon {100% {background-size: 100%;}}
}
/style4. 椭圆式进度条 loading 实现效果 代码如下 templatediv classparentBoxdiv classcontantBox/div/div
/template
style langless scoped
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 100px;.contantBox {width: 120px;height: 22px;border-radius: 20px;color: #514b82;border: 2px solid;position: relative;}.contantBox::before {content: ;position: absolute;margin: 2px;inset: 0 100% 0 0;border-radius: inherit;background: #514b82;animation: cartoon 2s infinite;}keyframes cartoon {100% {inset: 0;}}
}
/style5. 卡顿式进度条 loading 实现效果 代码如下 templatediv classparentBoxdiv classcontantBox/div/div
/template
style langless scoped
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 100px;.contantBox {width: 120px;height: 20px;border-radius: 20px;background: linear-gradient(orange 0 0) 0/0% no-repeat lightblue;animation: cartoon 2s infinite steps(10);}keyframes cartoon {100% {background-size: 110%;}}
}
/style6. 进度条波纹 loading 实现效果 代码如下 templatediv classparentBoxdiv classcontantBox/div/div
/template
style langless scoped
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 100px;.contantBox {width: 120px;height: 20px;border-radius: 20px;background: repeating-linear-gradient(135deg,#f03355 0 10px,#ffa516 0 20px)0/0% no-repeat,repeating-linear-gradient(135deg, #ddd 0 10px, #eee 0 20px) 0/100%;animation: cartoon 2s infinite;}keyframes cartoon {100% {background-size: 100%;}}
}
/style7. 进度条分隔式 loading 实现效果 代码如下 templatediv classparentBoxdiv classcontantBox/div/div
/template
style langless scoped
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 100px;.contantBox {width: 120px;height: 20px;-webkit-mask: linear-gradient(90deg, #000 70%, #0000 0) 0/20%;background: linear-gradient(rgb(73, 255, 57) 0 0) 0/0% no-repeat #ddd;animation: cartoon 2s infinite steps(6);}keyframes cartoon {100% {background-size: 120%;}}
}
/style8. 圆球连接式 loading 实现效果 代码如下 templatediv classparentBoxdiv classcontantBox/div/div
/template
style langless scoped
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 100px;.contantBox {width: 120px;height: 24px;-webkit-mask: radial-gradient(circle closest-side, #000 94%, #0000) 0 0/25%100%,linear-gradient(#000 0 0) center/calc(100% - 12px) calc(100% - 12px)no-repeat;background: linear-gradient(#25b09b 0 0) 0/0% no-repeat #ddd;animation: cartoon 2s infinite linear;}keyframes cartoon {100% {background-size: 100%;}}
}
/style9. 电池充电式 loading 实现效果 代码如下 templatediv classparentBoxdiv classcontantBox/div/div
/template
style langless scoped
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 100px;.contantBox {width: 80px;height: 40px;border: 2px solid rgb(103, 194, 58);padding: 3px;background: repeating-linear-gradient(90deg,rgb(103, 194, 58) 0 10px,#0000 0 16px)0/0% no-repeat content-box content-box;position: relative;animation: cartoon 2s infinite steps(6);}.contantBox::before {content: ;position: absolute;top: 50%;left: 100%;transform: translateY(-50%);width: 10px;height: 10px;border: 2px solid rgb(103, 194, 58);}keyframes cartoon {100% {background-size: 120%;}}
}
/style10. 球体分隔式 loading 实现效果 代码如下 templatediv classparentBoxdiv classcontantBox/div/div
/template
style langless scoped
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 100px;.contantBox {width: 60px;height: 60px;border-radius: 50%;-webkit-mask: linear-gradient(0deg, #000 55%, #0000 0) bottom/100% 18.18%;background: linear-gradient(#f03355 0 0) bottom/100% 0% no-repeat #ddd;animation: cartoon 2s infinite steps(7);}keyframes cartoon {100% {background-size: 100% 115%;}}
}
/style11. 水球波纹式 loading 实现效果 代码如下 templatediv classparentBoxdiv classcontantBox/div/div
/template
style langless scoped
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 100px;.contantBox {--r1: 154%;--r2: 68.5%;width: 60px;height: 60px;border-radius: 50%;background: radial-gradient(var(--r1) var(--r2) at top,#0000 79.5%,#269af2 80%)center left,radial-gradient(var(--r1) var(--r2) at bottom, #269af2 79.5%, #0000 80%)center center,radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%)center right,#ccc;background-size: 50.5% 220%;background-position: -100% 0%, 0% 0%, 100% 0%;background-repeat: no-repeat;animation: cartoon 2s infinite linear;}keyframes cartoon {33% {background-position: 0% 33%, 100% 33%, 200% 33%;}66% {background-position: -100% 66%, 0% 66%, 100% 66%;}100% {background-position: 0% 100%, 100% 100%, 200% 100%;}}
}
/style12. 半圆线条式 loading 实现效果 代码如下 templatediv classparentBoxdiv classcontantBox/div/div
/template
style langless scoped
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 100px;.contantBox {width: 120px;height: 60px;border-radius: 200px 200px 0 0;-webkit-mask: repeating-radial-gradient(farthest-side at bottom,#0000 0,#000 1px 12%,#0000 calc(12% 1px) 20%);background: radial-gradient(farthest-side at bottom, #514b82 0 95%, #0000 0)bottom/0% 0% no-repeat #ddd;animation: cartoon 2s infinite steps(6);}keyframes cartoon {100% {background-size: 120% 120%;}}
}
/style13. 球体内小球跳跃式 loading 实现效果 代码如下 templatediv classparentBox!-- 第一种 --divfiguresectiondiv/div/sectionsectiondiv/div/sectionsectiondiv/div/sectionsectiondiv/div/sectionsectiondiv/div/sectionsectiondiv/div/sectionsectiondiv/div/sectionsectiondiv/div/section/figure/div!-- 第二种 --divfiguresectiondiv/div/sectionsectiondiv/div/sectionsectiondiv/div/sectionsectiondiv/div/sectionsectiondiv/div/sectionsectiondiv/div/sectionsectiondiv/div/sectionsectiondiv/div/section/figure/div!-- 第三种 --divfiguresectiondiv/div/sectionsectiondiv/div/sectionsectiondiv/div/sectionsectiondiv/div/sectionsectiondiv/div/sectionsectiondiv/div/sectionsectiondiv/div/sectionsectiondiv/div/section/figure/div!-- 第四种 --divfiguresectiondiv/div/sectionsectiondiv/div/sectionsectiondiv/div/sectionsectiondiv/div/sectionsectiondiv/div/sectionsectiondiv/div/sectionsectiondiv/div/sectionsectiondiv/div/section/figure/div/div
/template
style langless scoped
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 100px;display: flex;keyframes move {from {transform: translate(0, 50%);}to {transform: translate(0, 850%);}}figure {margin: 10px;width: 40px;height: 40px;border-radius: 50%;position: relative;background: rgb(240,109,78);}section {width: 10%;height: 100%;position: absolute;left: 45%;}section:nth-child(2) {transform: rotate(22.5deg);}section:nth-child(3) {transform: rotate(45deg);}section:nth-child(4) {transform: rotate(67.5deg);}section:nth-child(5) {transform: rotate(90deg);}section:nth-child(6) {transform: rotate(112.5deg);}section:nth-child(7) {transform: rotate(135deg);}section:nth-child(8) {transform: rotate(157.5deg);}figure div {height: 10%;border-radius: 50%;background: #fff;animation: move 1s ease-in-out infinite alternate;}figure:nth-child(1) section:nth-child(1) div {animation-delay: -0.1875s;}figure:nth-child(1) section:nth-child(2) div {animation-delay: -0.175s;}figure:nth-child(1) section:nth-child(3) div {animation-delay: -0.1625s;}figure:nth-child(1) section:nth-child(4) div {animation-delay: -0.15s;}figure:nth-child(1) section:nth-child(5) div {animation-delay: -0.9375s;}figure:nth-child(1) section:nth-child(6) div {animation-delay: -0.925s;}figure:nth-child(1) section:nth-child(7) div {animation-delay: -0.9125s;}figure:nth-child(1) section:nth-child(8) div {animation-delay: -0.9s;}figure:nth-child(2) section:nth-child(1) div {animation-delay: -0.875s;}figure:nth-child(2) section:nth-child(2) div {animation-delay: -0.75s;}figure:nth-child(2) section:nth-child(3) div {animation-delay: -0.625s;}figure:nth-child(2) section:nth-child(4) div {animation-delay: -0.5s;}figure:nth-child(2) section:nth-child(5) div {animation-delay: -0.375s;}figure:nth-child(2) section:nth-child(6) div {animation-delay: -0.25s;}figure:nth-child(2) section:nth-child(7) div {animation-delay: -0.125s;}figure:nth-child(3) section:nth-child(1) div {animation-delay: -0.5s;}figure:nth-child(3) section:nth-child(3) div {animation-delay: -0.5s;}figure:nth-child(3) section:nth-child(5) div {animation-delay: -0.5s;}figure:nth-child(3) section:nth-child(7) div {animation-delay: -0.5s;}figure:nth-child(4) section:nth-child(1) div {animation-delay: -0.35s;}figure:nth-child(4) section:nth-child(2) div {animation-delay: -0.3s;}figure:nth-child(4) section:nth-child(3) div {animation-delay: -0.25s;}figure:nth-child(4) section:nth-child(4) div {animation-delay: -0.2s;}figure:nth-child(4) section:nth-child(5) div {animation-delay: -0.15s;}figure:nth-child(4) section:nth-child(6) div {animation-delay: -0.1s;}figure:nth-child(4) section:nth-child(7) div {animation-delay: -0.05s;}
}
/style14. 球体内动图式 loading 实现效果 代码如下 templatediv classparentBoxdiv classcontainerBox!-- 第一种 --div classcanvasBoxdiv classspinnerOneBox spinnerMaxBoxdiv classspinnerOneBox spinnerMidBoxdiv classspinnerOneBox spinnerMinBox/div/div/div/div!-- 第二种 --div classcanvasBox canvasTwoBoxdiv classspinnerTwoBox/divdiv classhourHandBox/divdiv classdotBox/div/div!-- 第三种 --div classcanvasBoxdiv classspinnerThreeBox/div/div!-- 第四种 --div classcanvasBoxdiv classspinnerFourBox/div/div!-- 第五种 --div classcanvasBoxdiv classspinnerFiveBox/div/div!-- 第六种 --div classcanvasBoxdiv classspinnerSexBox p1/divdiv classspinnerSexBox p2/divdiv classspinnerSexBox p3/divdiv classspinnerSexBox p4/div/div/div/div
/template
style langless scoped
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 100px;.containerBox {display: flex;.canvasBox {align-items: center;background: #eeeeee;border-radius: 50%;display: flex;justify-content: center;margin: 1em;width: 10em;height: 10em;// 第一种.spinnerOneBox {align-items: center;border: 0.3em solid transparent;border-top: 0.3em solid #4db6ac;border-right: 0.3em solid #4db6ac;border-radius: 100%;display: flex;justify-content: center;}.spinnerMaxBox {animation: spinnerOne 3s linear infinite;height: 3em;width: 3em;.spinnerMidBox {animation: spinnerOne 5s linear infinite;height: 2.4em;width: 2.4em;.spinnerMinBox {animation: spinnerOne 5s linear infinite;height: 1.8em;width: 1.8em;}}}}keyframes spinnerOne {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}// 第二种.canvasTwoBox {position: relative;.spinnerTwoBox {animation: spinnerTwo 1s linear infinite;background: #4db6ac;border-radius: 100px;height: 3em;transform-origin: top;position: absolute;top: 50%;width: 0.22em;}.hourHandBox {animation: spinnerTwo 7s linear infinite;background: #4db6ac;border-radius: 100px;height: 2em;transform-origin: top;position: absolute;top: 50%;width: 0.2em;}.dotBox {background: #4db6ac;border-radius: 100%;height: 0.5em;width: 0.5em;}}keyframes spinnerTwo {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}// 第三种.spinnerThreeBox {animation: spinnerThree 1s linear infinite;background: #4db6ac;border-radius: 100%;width: 3em;height: 3em;}keyframes spinnerThree {0%,35% {background: #4db6ac;transform: scale(1);}20%,50% {background: #80cbc4;transform: scale(1.3);}}// 第四种.spinnerFourBox {animation: spinnerFour 1s linear infinite;border: solid 7px transparent;border-top: solid 7px #4db6ac;border-radius: 100%;width: 3em;height: 3em;}keyframes spinnerFour {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}// 第五种.spinnerFiveBox {animation: spinnerFive 1s linear infinite;border: solid 1.5em #4db6ac;border-right: solid 1.5em transparent;border-left: solid 1.5em transparent;border-radius: 100%;width: 0;height: 0;}keyframes spinnerFive {0% {transform: rotate(0deg);}50% {transform: rotate(60deg);}100% {transform: rotate(360deg);}}// 第六种.spinnerSexBox {background: #4db6ac;border-radius: 50%;height: 1em;margin: 0.1em;width: 1em;}.p1 {animation: fall 1s linear 0.3s infinite;}.p2 {animation: fall 1s linear 0.2s infinite;}.p3 {animation: fall 1s linear 0.1s infinite;}.p4 {animation: fall 1s linear infinite;}keyframes fall {0% {transform: translateY(-15px);}25%,75% {transform: translateY(0);}100% {transform: translateY(-15px);}}}
}
/style持续更新中...
