資訊專欄INFORMATION COLUMN
摘要：源代碼下載每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從下載代碼解讀定義，容器中包含個(gè)元素居中顯示定義容器尺寸畫出眼睛的輪廓畫出眼球使雙眼向內(nèi)聚攏定義眨眼的動(dòng)畫最后，把動(dòng)畫效果應(yīng)用到兩只眼睛上大功告成
效果預(yù)覽
按下右側(cè)的“點(diǎn)擊預(yù)覽”按鈕可以在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。
https://codepen.io/comehope/pen/xzYVzO
可交互視頻此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。
請(qǐng)用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cRkRLsm
源代碼下載每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從 github 下載：
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom，容器中包含 2 個(gè)元素：
居中顯示：
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);
}
定義眨眼的動(dòng)畫：
@keyframes blink {
40%, 60% {
border-width: 0 5em;
}
50% {
border-width: 0 7.5em;
}
}
最后，把動(dòng)畫效果應(yīng)用到兩只眼睛上：
.eyes > * {
animation: blink 2s linear infinite;
}
大功告成！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/54569.html
摘要：源代碼下載每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從下載代碼解讀定義，容器中包含個(gè)元素居中顯示定義容器尺寸畫出眼睛的輪廓畫出眼球使雙眼向內(nèi)聚攏定義眨眼的動(dòng)畫最后，把動(dòng)畫效果應(yīng)用到兩只眼睛上大功告成 showImg(https://segmentfault.com/img/bVbctBw?w=500&h=500); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。 htt...
摘要：過(guò)往項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份發(fā)布的項(xiàng)目前端每日實(shí)戰(zhàn)專欄每天分解一個(gè)前端項(xiàng)目，用視頻記錄編碼過(guò)程，再配合詳細(xì)的代碼解讀，是學(xué)習(xí)前端開發(fā)的活的參考書視頻演示如何用純創(chuàng)作一個(gè)表達(dá)懷念童年心情的條紋彩虹心特效視頻演示如 過(guò)往項(xiàng)目 2018 年 5 月份項(xiàng)目匯總（共 30 個(gè)項(xiàng)目） 2018 年 4 月份項(xiàng)目匯總（共 8 個(gè)項(xiàng)目） 2018 年 6 月份發(fā)布的項(xiàng)目 ...
摘要：過(guò)往項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份發(fā)布的項(xiàng)目前端每日實(shí)戰(zhàn)專欄每天分解一個(gè)前端項(xiàng)目，用視頻記錄編碼過(guò)程，再配合詳細(xì)的代碼解讀，是學(xué)習(xí)前端開發(fā)的活的參考書視頻演示如何用純創(chuàng)作一個(gè)表達(dá)懷念童年心情的條紋彩虹心特效視頻演示如 過(guò)往項(xiàng)目 2018 年 5 月份項(xiàng)目匯總（共 30 個(gè)項(xiàng)目） 2018 年 4 月份項(xiàng)目匯總（共 8 個(gè)項(xiàng)目） 2018 年 6 月份發(fā)布的項(xiàng)目 ...
閱讀 2572·2023-04-25 20:05
閱讀 2897·2023-04-25 17:56
閱讀 2210·2021-10-14 09:49
閱讀 2697·2019-08-29 15:10
閱讀 2930·2019-08-29 12:25
閱讀 428·2019-08-28 18:23
閱讀 765·2019-08-26 13:26
閱讀 1381·2019-08-23 18:21
