江苏龙网

  1. 主页 > 生活百科 > >

css加载loading效果的片段

css

以下代码来源
https://tobiasahlin.com/spinkit/
为了怕源文件删除，我抄录了几个.....
1、加载方块(是我喜欢的效果)
css加载loading效果的片段

文章插图
 
//html<div class="spinner"></div>//css.spinner {width: 40px;height: 40px;background-color: #333;margin: 100px auto;-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;animation: sk-rotateplane 1.2s infinite ease-in-out;}@-webkit-keyframes sk-rotateplane {0% { -webkit-transform: perspective(120px) }50% { -webkit-transform: perspective(120px) rotateY(180deg) }100% { -webkit-transform: perspective(120px) rotateY(180deg)rotateX(180deg) }}@keyframes sk-rotateplane {0% {transform: perspective(120px) rotateX(0deg) rotateY(0deg);-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)} 50% {transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)} 100% {transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);}}2、追逐效果
css加载loading效果的片段

文章插图
 
【css加载loading效果的片段】//html<div class="sk-chase"><div class="sk-chase-dot"></div><div class="sk-chase-dot"></div><div class="sk-chase-dot"></div><div class="sk-chase-dot"></div><div class="sk-chase-dot"></div><div class="sk-chase-dot"></div></div>//css.sk-chase {width: 40px;height: 40px;position: relative;animation: sk-chase 2.5s infinite linear both;}.sk-chase-dot {width: 100%;height: 100%;position: absolute;left: 0;top: 0;animation: sk-chase-dot 2.0s infinite ease-in-out both; }.sk-chase-dot:before {content: '';display: block;width: 25%;height: 25%;background-color: #fff;border-radius: 100%;animation: sk-chase-dot-before 2.0s infinite ease-in-out both; }.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }@keyframes sk-chase {100% { transform: rotate(360deg); } }@keyframes sk-chase-dot {80%, 100% { transform: rotate(360deg); } }@keyframes sk-chase-dot-before {50% {transform: scale(0.4);} 100%, 0% {transform: scale(1.0);} }3、圆
css加载loading效果的片段

文章插图
 
//html<div class="sk-circle"><div class="sk-circle1 sk-child"></div><div class="sk-circle2 sk-child"></div><div class="sk-circle3 sk-child"></div><div class="sk-circle4 sk-child"></div><div class="sk-circle5 sk-child"></div><div class="sk-circle6 sk-child"></div><div class="sk-circle7 sk-child"></div><div class="sk-circle8 sk-child"></div><div class="sk-circle9 sk-child"></div><div class="sk-circle10 sk-child"></div><div class="sk-circle11 sk-child"></div><div class="sk-circle12 sk-child"></div></div>//css.sk-circle {margin: 100px auto;width: 40px;height: 40px;position: relative;}.sk-circle .sk-child {width: 100%;height: 100%;position: absolute;left: 0;top: 0;}.sk-circle .sk-child:before {content: '';display: block;margin: 0 auto;width: 15%;height: 15%;background-color: #333;border-radius: 100%;-webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;}.sk-circle .sk-circle2 {-webkit-transform: rotate(30deg);-ms-transform: rotate(30deg);transform: rotate(30deg); }.sk-circle .sk-circle3 {-webkit-transform: rotate(60deg);-ms-transform: rotate(60deg);transform: rotate(60deg); }.sk-circle .sk-circle4 {-webkit-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg); }.sk-circle .sk-circle5 {-webkit-transform: rotate(120deg);-ms-transform: rotate(120deg);transform: rotate(120deg); }.sk-circle .sk-circle6 {-webkit-transform: rotate(150deg);-ms-transform: rotate(150deg);transform: rotate(150deg); }.sk-circle .sk-circle7 {-webkit-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg); }.sk-circle .sk-circle8 {-webkit-transform: rotate(210deg);-ms-transform: rotate(210deg);transform: rotate(210deg); }.sk-circle .sk-circle9 {-webkit-transform: rotate(240deg);-ms-transform: rotate(240deg);transform: rotate(240deg); }.sk-circle .sk-circle10 {-webkit-transform: rotate(270deg);-ms-transform: rotate(270deg);transform: rotate(270deg); }.sk-circle .sk-circle11 {-webkit-transform: rotate(300deg);-ms-transform: rotate(300deg);transform: rotate(300deg); }.sk-circle .sk-circle12 {-webkit-transform: rotate(330deg);-ms-transform: rotate(330deg);transform: rotate(330deg); }.sk-circle .sk-circle2:before {-webkit-animation-delay: -1.1s;animation-delay: -1.1s; }.sk-circle .sk-circle3:before {-webkit-animation-delay: -1s;animation-delay: -1s; }.sk-circle .sk-circle4:before {-webkit-animation-delay: -0.9s;animation-delay: -0.9s; }.sk-circle .sk-circle5:before {-webkit-animation-delay: -0.8s;animation-delay: -0.8s; }.sk-circle .sk-circle6:before {-webkit-animation-delay: -0.7s;animation-delay: -0.7s; }.sk-circle .sk-circle7:before {-webkit-animation-delay: -0.6s;animation-delay: -0.6s; }.sk-circle .sk-circle8:before {-webkit-animation-delay: -0.5s;animation-delay: -0.5s; }.sk-circle .sk-circle9:before {-webkit-animation-delay: -0.4s;animation-delay: -0.4s; }.sk-circle .sk-circle10:before {-webkit-animation-delay: -0.3s;animation-delay: -0.3s; }.sk-circle .sk-circle11:before {-webkit-animation-delay: -0.2s;animation-delay: -0.2s; }.sk-circle .sk-circle12:before {-webkit-animation-delay: -0.1s;animation-delay: -0.1s; }@-webkit-keyframes sk-circleBounceDelay {0%, 80%, 100% {-webkit-transform: scale(0);transform: scale(0);} 40% {-webkit-transform: scale(1);transform: scale(1);}}@keyframes sk-circleBounceDelay {0%, 80%, 100% {-webkit-transform: scale(0);transform: scale(0);} 40% {-webkit-transform: scale(1);transform: scale(1);}}


推荐阅读


上一篇：Linux 部署时间同步服务Chrony

下一篇：三 OAuth网络安全登录认证