您好,登錄后才能下訂單哦!
這篇文章主要介紹CSS怎么實現(xiàn)多層嵌套結(jié)構(gòu)最外層旋轉(zhuǎn)其它層不旋轉(zhuǎn)效果,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
有這樣一個場景:一個圓形容器,最外層容器的背景為圓弧,現(xiàn)在要將最外層的圓弧進(jìn)行旋轉(zhuǎn),保證里面的容器里面的內(nèi)容不進(jìn)行旋轉(zhuǎn),接下來將跟大家分享一種解決方案,先看下最終實現(xiàn)的效果:
實現(xiàn)思路
最外層div設(shè)置邊框倒角百分之50,溢出隱藏
設(shè)置最外層背景為圓弧的背景圖
定義外層旋轉(zhuǎn)動畫,旋轉(zhuǎn)度數(shù)為正數(shù)
定義內(nèi)層旋轉(zhuǎn)動畫,旋轉(zhuǎn)度數(shù)為負(fù)數(shù)
啟動動畫,開始旋轉(zhuǎn)
外層為正數(shù)旋轉(zhuǎn),內(nèi)層為負(fù)數(shù)旋轉(zhuǎn),剛好抵消,理想效果實現(xiàn)
實現(xiàn)過程
dom結(jié)構(gòu)部分:布局外層div和內(nèi)層div
load-panel為外層div, headPortrait-img-panel 為內(nèi)層div, loadWhirl 為外層旋轉(zhuǎn)動畫, avatarRotation 為內(nèi)層旋轉(zhuǎn)動畫。
<!--頭像區(qū)域--> <div class="headPortrait-panel"> <!--加載層--> <div class="load-panel loadWhirl"> <!--頭像顯示層--> <div class="headPortrait-img-panel avatarRotation"> <img src="../assets/img/login/LoginWindow_BigDefaultHeadImage@2x.png"/> </div> </div> </div>
css部分:對樣式進(jìn)行布局,實現(xiàn)旋轉(zhuǎn)動畫邏輯。
/*頭像區(qū)域*/ .headPortrait-panel{ width: 100%; height: 200px; display: flex; justify-content: center; align-items: center; margin-top: 50px; /*加載層*/ .load-panel{ width: 240px; height: 240px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: url("../img/login/loading-circle@2x.png"); img{ width: 100%; height: 100%; } // 頭像旋轉(zhuǎn)動畫 .avatarRotation{ animation: internalAvatar 3s linear; // 動畫無限循環(huán) animation-iteration-count:infinite; } /*頭像顯示層*/ .headPortrait-img-panel{ width: 200px; height: 200px; border-radius: 50%; overflow: hidden; border: solid 1px #ebeced; img{ width: 100%; height: 100%; } } } // 外部旋轉(zhuǎn)動畫 .loadWhirl{ animation: externalHalo 3s linear; // 動畫無限循環(huán) animation-iteration-count:infinite; } } // 定義外部光環(huán)旋轉(zhuǎn)動畫 @keyframes externalHalo { 0%{ transform: rotate(0deg); } 25%{ transform: rotate(90deg); } 50%{ transform: rotate(180deg); } 100%{ transform: rotate(360deg); } } // 定義內(nèi)部頭像旋轉(zhuǎn)動畫 @keyframes internalAvatar { 0%{ transform: rotate(0deg); } 25%{ transform: rotate(-90deg); } 50%{ transform: rotate(-180deg); } 100%{ transform: rotate(-360deg); } }
以上是“CSS怎么實現(xiàn)多層嵌套結(jié)構(gòu)最外層旋轉(zhuǎn)其它層不旋轉(zhuǎn)效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。