摘要:可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。源代碼下載每日前端實戰系列的全部源代碼請從下載代碼解讀定義,只有個元素居中顯示定義容器尺寸用偽元素畫出個像寶路薄荷糖狀的黑色圓環接下來制作動畫效果。
效果預覽
按下右側的“點擊預覽”按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/oagrvz
可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cRbqJcD
源代碼下載每日前端實戰系列的全部源代碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom,只有 1 個元素:
居中顯示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: silver; }
定義容器尺寸:
.spinner { width: 50vmin; height: 50vmin; position: relative; }
用 before 偽元素畫出 1 個像寶路薄荷糖狀的黑色圓環:
.spinner::before { content: ""; position: absolute; box-sizing: border-box; width: inherit; height: inherit; border: 12.5vmin solid; border-radius: 50%; }
接下來制作動畫效果。
設置透視景深:
body { perspective: 400px; }
讓圓環在 z 軸上運動:
.spinner::before { animation: spin 1.5s ease-in-out infinite both reverse; } @keyframes spin { 0%, 100% { transform: translateZ(10vmin); } 60% { transform: translateZ(-10vmin); } }
讓圓環在 z 軸距離較大時稍稍傾斜:
@keyframes spin { 0%, 100% { transform: translateZ(10vmin) rotateX(25deg); } 60% { transform: translateZ(-10vmin); } }
增加縮放效果:
@keyframes spin { 0%, 100% { transform: translateZ(10vmin) rotateX(25deg); } 33% { transform: translateZ(-10vmin) scale(0.4); } 60% { transform: translateZ(-10vmin); } }
用 after 偽元素再畫出一個白色的圓環,并且讓它的動畫延遲動畫總長的一半時間:
.spinner::before, .spinner::after { /*略*/ animation: spin 1.5s ease-in-out infinite both reverse; } .spinner::after { border-color: white; animation-delay: -0.75s; }
接下來制作容器的動畫效果,為了不受子元素動畫的影響,先暫時屏蔽偽元素的動畫效果。
.spinner::before, .spinner::after { /* animation: spin 1.5s ease-in-out infinite both reverse; */ }
增加容器沿 x 軸旋轉的動畫效果,動畫時間為子元素動畫時間的2倍:
.spinner { animation: wobble 3s ease-in-out infinite; } @keyframes wobble { 0%, 100% { transform: rotateX(15deg); } 50% { transform: rotateX(60deg); } }
增加容器沿 y 軸旋轉的動畫效果:
@keyframes wobble { 0%, 100% { transform: rotateX(15deg) rotateY(60deg); } 50% { transform: rotateX(60deg) rotateY(-60deg); } }
增加容器整體旋轉的動畫效果:
@keyframes wobble { 0%, 100% { transform: rotateX(15deg) rotateY(60deg); } 50% { transform: rotateX(60deg) rotateY(-60deg) rotate(180deg); } }
打開子元素的動畫效果,使子元素的動畫效果和容器的動畫效果疊加:
.spinner::before, .spinner::after { animation: spin 1.5s ease-in-out infinite both reverse; }
最后,使子元素在 3d 空間上運動:
.spinner { transform-style: preserve-3d; }
大功告成!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/53001.html
摘要:可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。源代碼下載每日前端實戰系列的全部源代碼請從下載代碼解讀定義,只有個元素居中顯示定義容器尺寸用偽元素畫出個像寶路薄荷糖狀的黑色圓環接下來制作動畫效果。 showImg(https://segmentfault.com/img/bVbhIKv?w=400&h=300); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽,...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書 過往項目 2018 年 8 月份項目匯總(共 29 個項目) 2018 年 7 月份項目匯總(共 29 個項目) 2018 年 6 月份項目匯總(...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書 過往項目 2018 年 8 月份項目匯總(共 29 個項目) 2018 年 7 月份項目匯總(共 29 個項目) 2018 年 6 月份項目匯總(...
閱讀 1039·2021-11-18 13:23
閱讀 746·2021-11-08 13:16
閱讀 855·2021-10-11 10:58
閱讀 3510·2021-09-22 15:26
閱讀 1732·2021-09-08 10:42
閱讀 1807·2021-09-04 16:45
閱讀 1733·2019-08-30 15:54
閱讀 2564·2019-08-30 13:45