国
内见过的部分纯css加载动画也就那么几个,而且貌似用的人比较多,所以就不扒来这里了,下面这两个加载动画算是第一弹。目前还没见有人使用所以放在这里当作一个资源,必要的时候也可以自己用。
第一个
<div class="wrap"> <div class="loader"></div> <div class="loaderbefore"></div> <div class="circular"></div> <div class="circular another"></div> <div class="text">Loading</div> </div>
CSS
.wrap { position: relative; top: 150px; width: 150px; margin: 0 auto; } .loader { position: absolute; top: 0; z-index: 10; width: 50px; height: 50px; border: 15px solid; border-radius: 50%; border-top-color: rgba(44,44,44,0); border-right-color: rgba(55,55,55,0); border-bottom-color: rgba(66,66,66,0); border-left-color: rgba(33,33,33,0); animation: loadEr 3s infinite; } @keyframes loadEr { 0% { border-top-color: rgba(44,44,44,0); border-right-color: rgba(55,55,55,0); border-bottom-color: rgba(66,66,66,0); border-left-color: rgba(33,33,33,0); } 10.4% { border-top-color: rgba(44,44,44,0.5); border-right-color: rgba(55,55,55,0); border-bottom-color: rgba(66,66,66,0); border-left-color: rgba(33,33,33,0); } 20.8% { border-top-color: rgba(44,44,44,0); border-right-color: rgba(55,55,55,0); border-bottom-color: rgba(66,66,66,0); border-left-color: rgba(33,33,33,0); } 31.2% { border-top-color: rgba(44,44,44,0); border-right-color: rgba(55,55,55,0.5); border-bottom-color: rgba(66,66,66,0); border-left-color: rgba(33,33,33,0); } 41.6% { border-top-color: rgba(44,44,44,0); border-right-color: rgba(55,55,55,0); border-bottom-color: rgba(66,66,66,0); border-left-color: rgba(33,33,33,0); transform: rotate(40deg); } 52% { border-top-color: rgba(44,44,44,0); border-right-color: rgba(55,55,55,0); border-bottom-color: rgba(66,66,66,0.5); border-left-color: rgba(33,33,33,0); } 62.4% { border-top-color: rgba(44,44,44,0); border-right-color: rgba(55,55,55,0); border-bottom-color: rgba(66,66,66,0); border-left-color: rgba(33,33,33,0); } 72.8% { border-top-color: rgba(44,44,44,0); border-right-color: rgba(55,55,55,0); border-bottom-color: rgba(66,66,66,0); border-left-color: rgba(33,33,33,0.5); } } .loaderbefore { width: 50px; height:50px; border: 15px solid #ddd; border-radius: 50%; position: absolute; top: 0; z-index: 9; } .circular { position: absolute; top: -15px; left: -15px; width: 70px; height: 70px; border: 20px solid; border-radius: 50%; border-top-color: #333; border-left-color: #fff; border-bottom-color: #333; border-right-color: #fff; opacity: 0.2; animation: poof 5s infinite; } @keyframes poof { 0% {transform: scale(1,1) rotate(0deg); opacity: 0.2;} 50% {transform: scale(4,4) rotate(360deg); opacity: 0;} } .another { opacity: 0.1; transform: rotate(90deg); animation: poofity 5s infinite; animation-delay: 1s; } @keyframes poofity { 0% {transform: scale(1,1) rotate(90deg); opacity: 0.1;} 50% {transform: scale(4,4) rotate(-360deg); opacity: 0;} } .text { position: absolute; top: 95px; left: 8px; font-family: Arial; text-transform: uppercase; color: #888; animation: opaa 10s infinite; } @keyframes opaa { 0% {opacity: 1;} 10% {opacity: 0.5} 15% {opacity: 1;} 30% {opacity: 1;} 65% {opacity: 0.3;} 90% {opacity: 0.8;} }
第二个
<div id="container"> <span></span> <span></span> <span></span> <p>LOADING</p> </div>
CSS
#container{ position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -10px; text-align: center; font-family: Arial; font-weight: bold; } #container span{ display: block; background: #000; width: 100px; height: 5px; margin-top: 5px; animation: load 2s infinite; border-radius: 5px; } #container span:nth-child(2){animation-delay: 100ms;} #container span:nth-child(3){animation-delay: 200ms;} @keyframes load{ 50%{ width: 5px; margin-right: 95px; opacity: .1; } }
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/3976.html