摘要:可交互視頻此視頻是可以交互的,你可以隨時(shí)暫停視頻,編輯視頻中的代碼。源代碼下載每日前端實(shí)戰(zhàn)系列的全部源代碼請從下載代碼解讀定義,容器中包含個(gè)元素,代表火車,代表鐵軌,其中包含的個(gè)代表根枕木。居中顯示定義容器尺寸先畫火車。
效果預(yù)覽
按下右側(cè)的“點(diǎn)擊預(yù)覽”按鈕可以在當(dāng)前頁面預(yù)覽,點(diǎn)擊鏈接可以全屏預(yù)覽。
https://codepen.io/comehope/pen/RBLWzJ
可交互視頻此視頻是可以交互的,你可以隨時(shí)暫停視頻,編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cawN3f9
源代碼下載每日前端實(shí)戰(zhàn)系列的全部源代碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom,容器中包含 2 個(gè)元素,train 代表火車,track 代表鐵軌,其中包含的 3 個(gè) 代表 3 根枕木。
居中顯示:
body{ margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(#666, #333); }
定義容器尺寸:
.loader { width: 8em; height: 10em; font-size: 20px; }
先畫火車。
畫出火車的輪廓:
.train { width: 6em; height: 6em; color: #444; background: #bbb4ab; border-radius: 1em; position: relative; left: 1em; }
用 ::before 偽元素畫出車窗:
.train::before { content: ""; position: absolute; width: 80%; height: 2.3em; background-color: currentColor; border-radius: 0.4em; top: 1.2em; left: 10%; }
再用 ::after 偽元素畫出車窗上的信號燈:
.train::after { content: ""; position: absolute; width: 25%; height: 0.4em; background-color: currentColor; border-radius: 0.3em; top: 0.4em; left: calc((100% - 25%) / 2); }
利用徑向漸變畫出車燈:
.train { background: radial-gradient(circle at 20% 80%, currentColor 0.6em, transparent 0.6em), radial-gradient(circle at 80% 80%, currentColor 0.6em, transparent 0.6em), #bbb; }
接下來畫鐵軌和枕木。
定義鐵軌的寬度,比火車稍寬:
.track { width: 8em; }
用偽元素畫出鐵軌:
.track { position: relative; } .track::before, .track::after { content: ""; position: absolute; width: 0.3em; height: 4em; background-color: #bbb; border-radius: 0.4em; }
把鐵軌分別放置在兩側(cè),并形成近大遠(yuǎn)小的視覺效果:
.track::before, .track::after { transform-origin: bottom; } .track::before { left: 0; transform: skewX(-27deg); } .track::after { right: 0; transform: skewX(27deg); }
畫出枕木,這是距離觀察者最近的效果,目前 3 根枕木是重疊在一起的:
.track span { width: inherit; height: 0.3em; background-color: #bbb; position: absolute; top: 4em; }
設(shè)置鐵軌的動畫效果:
.track span { animation: track-animate 1s linear infinite; } @keyframes track-animate { 0% { transform: translateY(-0.5em) scaleX(0.9); filter: opacity(0); } 10%, 90% { filter: opacity(1); } 100% { transform: translateY(-4em) scaleX(0.5); filter: opacity(0); } }
為另外 2 根枕木設(shè)置動畫延時(shí),使鐵軌看起來就像永遠(yuǎn)走不完的樣子:
.track span:nth-child(2) { animation-delay: -0.33s; } .track span:nth-child(3) { animation-delay: -0.66s; }
最后,為火車增加動畫效果,看起來就像在行駛中微微晃動:
.train { animation: train-animate 1.5s infinite ease-in-out; } @keyframes train-animate { 0%, 100% { transform: rotate(0deg); } 25%, 75% { transform: rotate(0.5deg); } 50% { transform: rotate(-0.5deg); } }
大功告成!
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/52722.html
摘要:可交互視頻此視頻是可以交互的,你可以隨時(shí)暫停視頻,編輯視頻中的代碼。源代碼下載每日前端實(shí)戰(zhàn)系列的全部源代碼請從下載代碼解讀定義,容器中包含個(gè)元素,代表火車,代表鐵軌,其中包含的個(gè)代表根枕木。居中顯示定義容器尺寸先畫火車。 showImg(https://segmentfault.com/img/bVbeos6?w=400&h=300); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)...
摘要:過往項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份發(fā)布的項(xiàng)目前端每日實(shí)戰(zhàn)專欄每天分解一個(gè)前端項(xiàng)目,用視頻記錄編碼過程,再配合詳細(xì)的代碼解讀,是學(xué)習(xí)前端開發(fā)的活的參考書視頻演示如何用純創(chuàng)作一臺咖啡機(jī)視頻演示如何用 過往項(xiàng)目 2018 年 6 月份項(xiàng)目匯總(共 27 個(gè)項(xiàng)目) 2018 年 5 月份項(xiàng)目匯總(共 30 個(gè)項(xiàng)目) 2018 年 4 月份項(xiàng)目匯總(...
摘要:過往項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份發(fā)布的項(xiàng)目前端每日實(shí)戰(zhàn)專欄每天分解一個(gè)前端項(xiàng)目,用視頻記錄編碼過程,再配合詳細(xì)的代碼解讀,是學(xué)習(xí)前端開發(fā)的活的參考書視頻演示如何用純創(chuàng)作一臺咖啡機(jī)視頻演示如何用 過往項(xiàng)目 2018 年 6 月份項(xiàng)目匯總(共 27 個(gè)項(xiàng)目) 2018 年 5 月份項(xiàng)目匯總(共 30 個(gè)項(xiàng)目) 2018 年 4 月份項(xiàng)目匯總(...
閱讀 930·2021-11-23 09:51
閱讀 993·2021-11-18 10:02
閱讀 1911·2021-09-10 11:27
閱讀 3140·2021-09-10 10:51
閱讀 779·2019-08-29 15:13
閱讀 2064·2019-08-29 11:32
閱讀 2502·2019-08-29 11:25
閱讀 3045·2019-08-26 11:46