CSS實現(xiàn)多層嵌套結構最外層旋轉其它層不旋轉效果
發(fā)布時間:2020-02-05 16:45:09 作者:神奇的程序員
我要評論

這篇文章主要介紹了CSS實現(xiàn)多層嵌套結構最外層旋轉其它層不旋轉效果,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
有這樣一個場景:一個圓形容器,最外層容器的背景為圓弧,現(xiàn)在要將最外層的圓弧進行旋轉,保證里面的容器里面的內容不進行旋轉,接下來將跟大家分享一種解決方案,先看下最終實現(xiàn)的效果:
實現(xiàn)思路
- 最外層div設置邊框倒角百分之50,溢出隱藏
- 設置最外層背景為圓弧的背景圖
- 定義外層旋轉動畫,旋轉度數(shù)為正數(shù)
- 定義內層旋轉動畫,旋轉度數(shù)為負數(shù)
- 啟動動畫,開始旋轉
- 外層為正數(shù)旋轉,內層為負數(shù)旋轉,剛好抵消,理想效果實現(xiàn)
實現(xiàn)過程
dom結構部分:布局外層div和內層div
load-panel為外層div, headPortrait-img-panel 為內層div, loadWhirl 為外層旋轉動畫, avatarRotation 為內層旋轉動畫。
<!--頭像區(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部分:對樣式進行布局,實現(xià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%; } // 頭像旋轉動畫 .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%; } } } // 外部旋轉動畫 .loadWhirl{ animation: externalHalo 3s linear; // 動畫無限循環(huán) animation-iteration-count:infinite; } } // 定義外部光環(huán)旋轉動畫 @keyframes externalHalo { 0%{ transform: rotate(0deg); } 25%{ transform: rotate(90deg); } 50%{ transform: rotate(180deg); } 100%{ transform: rotate(360deg); } } // 定義內部頭像旋轉動畫 @keyframes internalAvatar { 0%{ transform: rotate(0deg); } 25%{ transform: rotate(-90deg); } 50%{ transform: rotate(-180deg); } 100%{ transform: rotate(-360deg); } }
項目地址
上述代碼地址:chat-system
項目克隆到本地后,訪問 http://localhost:8020/login 即可查看效果
本文實現(xiàn)效果文件路徑:src/views/login.vue
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
純css多種方法實現(xiàn)div中單行文字、多行文字及嵌套div垂直水平居中
經(jīng)常遇到要居中的問題,水平居中問題比較好解決,而垂直居中問題因為vertical-align經(jīng)常失效,下面與大家分享下幾個不錯的解決方法2014-04-24LESS 讓css也支持變量,運算符,include,嵌套規(guī)則等等
最近在網(wǎng)上看到1個很有意思的CSS擴展,這里介紹給大家。LESS 最早是1個ruby的gem,用于擴展css的語法,用了LESS后,可以在css中使用變量,運算符,include,嵌套規(guī)則等等。2010-07-04- 除非你的網(wǎng)站只有一頁,不然你一定會用的導航的.事實上,導航在網(wǎng)頁設計中是最重要部分之一.你要用很多時間去考慮如何讓瀏覽者更容易訪問你的網(wǎng)站.2009-11-30
- 網(wǎng)頁制作Webjx文章簡介:簡單學習css組合與CSS嵌套的寫法. CSS組合 你不必重復有相同屬性的多個選擇符,你只要用英文逗號(,)隔開選擇符就可以了2009-04-02
CSS 即將支持嵌套,SASS/LESS 等預處理器該何去何從
隨著 CSS 自定義屬性(CSS Variable)的大規(guī)模兼容,到如今 CSS 即將支持嵌套,一些預處理器的核心功能已經(jīng)被 CSS 原生支持,這是否表示 SASS/LESS 等預處理器已無用武之地2021-08-10