摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。中間代碼略讓各線條分別延時啟動動畫,形成旗幟飄揚的效果最后,增加光影效果大功告成
效果預覽
按下右側的“點擊預覽”按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/qydvBm
可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cD9pLTW
源代碼下載每日前端實戰系列的全部源代碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom,容器中包含 15 個元素:
居中顯示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: black; }
定義容器尺寸:
.flag { width: 10em; height: 15em; font-size: 20px; }
設置線條樣式:
.flag span { width: 0.25em; height: inherit; background-color: deepskyblue; }
讓線條平鋪:
.flag { display: flex; justify-content: space-between; }
增加 3d 透視效果:
.flag { transform: perspective(500px) rotateY(-20deg); }
定義左右移動的動畫效果:
.flag span { animation: wave 1.5s ease-in-out infinite alternate; } @keyframes wave { to { transform: translateX(2em); } }
設置元素變量值:
.flag span:nth-child(1) { --n: 1; } .flag span:nth-child(2) { --n: 2; } /* 共 15 個元素,每元素的 --n 變量值等于它的序號。 */ /* 中間代碼略 …… */ .flag span:nth-child(14) { --n: 14; } .flag span:nth-child(15) { --n: 15; }
讓各線條分別延時啟動動畫,形成旗幟飄揚的效果:
.flag span { animation-delay: calc(var(--n) * -0.1s); }
最后,增加光影效果:
.flag span { background-color: ghostwhite; } @keyframes wave { to { transform: translateX(2em); background-color: deepskyblue; } }
大功告成!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/116883.html
摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。中間代碼略讓各線條分別延時啟動動畫,形成旗幟飄揚的效果最后,增加光影效果大功告成 showImg(https://segmentfault.com/img/bVbdH1c?w=500&h=500); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書視頻演示如何用純創作一臺咖啡機視頻演示如何用 過往項目 2018 年 6 月份項目匯總(共 27 個項目) 2018 年 5 月份項目匯總(共 30 個項目) 2018 年 4 月份項目匯總(...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書視頻演示如何用純創作一臺咖啡機視頻演示如何用 過往項目 2018 年 6 月份項目匯總(共 27 個項目) 2018 年 5 月份項目匯總(共 30 個項目) 2018 年 4 月份項目匯總(...
閱讀 2398·2021-11-23 09:51
閱讀 1209·2021-11-22 13:54
閱讀 3421·2021-09-24 10:31
閱讀 1066·2021-08-16 10:46
閱讀 3619·2019-08-30 15:54
閱讀 700·2019-08-30 15:54
閱讀 2886·2019-08-29 17:17
閱讀 3154·2019-08-29 15:08