大家好,我是【程序視點(diǎn)】小二哥!
今天要上的菜不是 Animate.js,也不是 Move.js,而是能提供108種加載動(dòng)畫(huà)的庫(kù):Whirl
.
最省力的加載動(dòng)畫(huà)
話不多說(shuō),直接來(lái)看例子。
以上只是冰山一角。whirl的CSS加載動(dòng)畫(huà)集合中有108種選項(xiàng)供你挑選。選中喜歡的動(dòng)畫(huà)后,點(diǎn)擊“Grab the CSS on Github!”。
將跳轉(zhuǎn)到Github頁(yè)面,直接獲取 CSS 樣式,拷貝到自己的樣式文件中使用即可。
@-webkit-keyframes spin {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes spin {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
/**
* Ring of stars
*
* @author jh3y
*/
.ring-of-stars {
-webkit-animation: spin 1.25s infinite linear;
animation: spin 1.25s infinite linear;
height: 50px;
position: relative;
width: 50px; }
.ring-of-stars div {
border-bottom: 9.6px solid var(--primary);
border-left: 3.2px solid transparent;
border-right: 3.2px solid transparent;
height: 0;
position: relative;
width: 0;
left: 50%;
position: absolute;
top: 50%;
-webkit-transform-origin: center 9.6px;
transform-origin: center 9.6px; }
.ring-of-stars div:after, .ring-of-stars div:before {
border-bottom: 6.4px solid var(--primary);
border-left: 9.6px solid transparent;
border-right: 9.6px solid transparent;
content: '';
display: block;
height: 0;
position: absolute;
width: 0; }
.ring-of-stars div:after {
-webkit-transform: translate(-9.6px, 6.4px) rotate(-35deg);
transform: translate(-9.6px, 6.4px) rotate(-35deg); }
.ring-of-stars div:before {
-webkit-transform: translate(-9.6px, 6.4px) rotate(35deg);
transform: translate(-9.6px, 6.4px) rotate(35deg); }
.ring-of-stars div:nth-child(1) {
-webkit-transform: translate(-50%, -9.6px) rotate(51.42857deg) translate(0, 400%);
transform: translate(-50%, -9.6px) rotate(51.42857deg) translate(0, 400%); }
.ring-of-stars div:nth-child(2) {
-webkit-transform: translate(-50%, -9.6px) rotate(102.85714deg) translate(0, 400%);
transform: translate(-50%, -9.6px) rotate(102.85714deg) translate(0, 400%); }
.ring-of-stars div:nth-child(3) {
-webkit-transform: translate(-50%, -9.6px) rotate(154.28571deg) translate(0, 400%);
transform: translate(-50%, -9.6px) rotate(154.28571deg) translate(0, 400%); }
.ring-of-stars div:nth-child(4) {
-webkit-transform: translate(-50%, -9.6px) rotate(205.71429deg) translate(0, 400%);
transform: translate(-50%, -9.6px) rotate(205.71429deg) translate(0, 400%); }
.ring-of-stars div:nth-child(5) {
-webkit-transform: translate(-50%, -9.6px) rotate(257.14286deg) translate(0, 400%);
transform: translate(-50%, -9.6px) rotate(257.14286deg) translate(0, 400%); }
.ring-of-stars div:nth-child(6) {
-webkit-transform: translate(-50%, -9.6px) rotate(308.57143deg) translate(0, 400%);
transform: translate(-50%, -9.6px) rotate(308.57143deg) translate(0, 400%); }
.ring-of-stars div:nth-child(7) {
-webkit-transform: translate(-50%, -9.6px) rotate(360deg) translate(0, 400%);
transform: translate(-50%, -9.6px) rotate(360deg) translate(0, 400%); }
重點(diǎn)注意
大家看到上面的例子中,css樣式文件占了很大篇幅了。有小伙伴會(huì)問(wèn):有沒(méi)有該CSS的發(fā)行版本呢?
答案是:沒(méi)有
。
應(yīng)為程序的引用越精煉,效率越高。如果為了使用一個(gè)加載動(dòng)畫(huà),就去引入一整個(gè)文件,有點(diǎn)得不償失。
還有就是考慮:更方便的修改
。
前例中的加載效果其實(shí)沒(méi)有占用多少樣式
,占用篇幅最多的是五角星這個(gè)形狀和各自的定位。如果你把五角星改為圓點(diǎn)那就簡(jiǎn)單多了。
這款加載動(dòng)畫(huà)的小工具,可以直接使用,也可以以此為模板,從中獲取靈感,改變和做你想做的事情??
加載動(dòng)畫(huà)108款,誰(shuí)是你中意的款呢?趕緊去看看吧!
官網(wǎng)地址
https://whirl.netlify.app/
寫(xiě)在最后
Javascript的動(dòng)畫(huà)庫(kù)多種多樣!你最常用的是哪個(gè)庫(kù)呢?歡迎分享!后續(xù),小二哥會(huì)持續(xù)不定時(shí)會(huì)分享一些技術(shù)要點(diǎn),更有一些資源收藏愛(ài)好者會(huì)分享一些優(yōu)質(zhì)的學(xué)習(xí)資料。吃瓜、摸魚(yú)、白嫖技術(shù)就等你了~文章來(lái)源:http://www.zghlxwxcb.cn/news/detail-436561.html
進(jìn)群方式:在下方公眾號(hào)后臺(tái),回復(fù)111
,按提示操作即可進(jìn)群。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-436561.html
到了這里,關(guān)于108中超輕量級(jí)的加載動(dòng)畫(huà)!的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!