摘要:源代碼下載每日前端實戰(zhàn)系列的全部源代碼請從下載代碼解讀定義,容器中包含個元素居中顯示定義容器尺寸畫出眼睛的輪廓畫出眼球使雙眼向內(nèi)聚攏定義眨眼的動畫最后,把動畫效果應(yīng)用到兩只眼睛上大功告成
效果預(yù)覽
按下右側(cè)的“點擊預(yù)覽”按鈕可以在當(dāng)前頁面預(yù)覽,點擊鏈接可以全屏預(yù)覽。
https://codepen.io/comehope/pen/xzYVzO
可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cRkRLsm
源代碼下載每日前端實戰(zhàn)系列的全部源代碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom,容器中包含 2 個元素:
居中顯示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: black; }
定義容器尺寸:
.eyes { width: 40em; height: 10em; font-size: 10px; }
畫出眼睛的輪廓:
.eyes { position: relative; } .eyes > * { box-sizing: border-box; position: absolute; width: 15em; height: 10em; border: solid white; } .eyes .left { left: 0; } .eyes .right { right: 0; }
畫出眼球:
.eyes > * { border-width: 0 5em; } .eyes .left { border-radius: 50% 0; } .eyes .right { border-radius: 0 50%; }
使雙眼向內(nèi)聚攏:
.eyes .left { transform: rotate(25deg); } .eyes .right { transform: rotate(-25deg); }
定義眨眼的動畫:
@keyframes blink { 40%, 60% { border-width: 0 5em; } 50% { border-width: 0 7.5em; } }
最后,把動畫效果應(yīng)用到兩只眼睛上:
.eyes > * { animation: blink 2s linear infinite; }
大功告成!
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/116751.html
摘要:源代碼下載每日前端實戰(zhàn)系列的全部源代碼請從下載代碼解讀定義,容器中包含個元素居中顯示定義容器尺寸畫出眼睛的輪廓畫出眼球使雙眼向內(nèi)聚攏定義眨眼的動畫最后,把動畫效果應(yīng)用到兩只眼睛上大功告成 showImg(https://segmentfault.com/img/bVbctBw?w=500&h=500); 效果預(yù)覽 按下右側(cè)的點擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽,點擊鏈接可以全屏預(yù)覽。 htt...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發(fā)布的項目前端每日實戰(zhàn)專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細(xì)的代碼解讀,是學(xué)習(xí)前端開發(fā)的活的參考書視頻演示如何用純創(chuàng)作一個表達(dá)懷念童年心情的條紋彩虹心特效視頻演示如 過往項目 2018 年 5 月份項目匯總(共 30 個項目) 2018 年 4 月份項目匯總(共 8 個項目) 2018 年 6 月份發(fā)布的項目 ...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發(fā)布的項目前端每日實戰(zhàn)專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細(xì)的代碼解讀,是學(xué)習(xí)前端開發(fā)的活的參考書視頻演示如何用純創(chuàng)作一個表達(dá)懷念童年心情的條紋彩虹心特效視頻演示如 過往項目 2018 年 5 月份項目匯總(共 30 個項目) 2018 年 4 月份項目匯總(共 8 個項目) 2018 年 6 月份發(fā)布的項目 ...
閱讀 2291·2021-11-24 10:18
閱讀 2721·2021-11-19 09:59
閱讀 1712·2019-08-30 15:53
閱讀 1187·2019-08-30 15:53
閱讀 1070·2019-08-30 14:19
閱讀 2482·2019-08-30 13:14
閱讀 3005·2019-08-30 13:00
閱讀 1938·2019-08-30 11:11