摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻教程此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
效果預覽
按下右側的“點擊預覽”按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/odKrpy
可交互視頻教程此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cV7J6SK
源代碼下載每日前端實戰系列的全部源代碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom,只有一個元素:
居中顯示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: mediumturquoise; }
定義容器尺寸:
.panda { width: 21em; height: 16em; background-color: white; }
畫出頭部輪廓:
.panda { border: 0.5em solid #333; border-top-left-radius: 11em; border-top-right-radius: 11em; border-bottom-left-radius: 11em 6em; border-bottom-right-radius: 11em 6em; }
畫出右眼輪廓:
.panda { position: relative; } .panda::before { content: ""; position: absolute; width: 7em; height: 4em; left: 2.9em; top: 5.5em; background-color: #333; border-radius: 50% 50% 45% 42%; transform: rotate(-45deg); }
類似地,畫出左眼輪廓:
.panda::after { content: ""; position: absolute; width: 7em; height: 4em; left: 11.1em; top: 5.5em; background-color: #333; border-radius: 50% 50% 42% 45%; transform: rotate(45deg); }
畫出兩只耳朵:
.panda::before { box-shadow: 1em -7.2em 0 -0.4em #333; } .panda::after { box-shadow: -1em -7.2em 0 -0.4em #333; }
畫出兩只眼睛:
.panda::before { background-image: radial-gradient(circle at 5.1em 2em, white 0.3em, transparent 0.3em), radial-gradient(circle at 4.6em 2em, #333 0.7em, transparent 0.7em), radial-gradient(circle at 4.5em 2em, white 1em, transparent 1em); } .panda::after { background-image: radial-gradient(circle at 2.4em 1.5em, white 0.3em, transparent 0.3em), radial-gradient(circle at 2.4em 2em, #333 0.7em, transparent 0.7em), radial-gradient(circle at 2.5em 2em, white 1em, transparent 1em); }
畫出鼻子和嘴:
.panda { background-image: radial-gradient(ellipse at 50% 60%, #333 1.2em, transparent 1.2em), radial-gradient(ellipse at 50% 80%, #555 0.6em, transparent 0.6em); }
增加一點立體效果:
.panda { border-bottom-width: 1em; box-shadow: inset 1em -1em 0 #eee; }
讓右眼動起來:
.panda::before { animation: before-animate 1s ease-in-out infinite alternate; } @keyframes before-animate { to { background-image: radial-gradient(circle at 4.9em 1.8em, white 0.3em, transparent 0.3em), radial-gradient(circle at 4.4em 1.8em, #333 0.7em, transparent 0.7em), radial-gradient(circle at 4.5em 2em, white 1em, transparent 1em); } }
類似地,讓左眼也動起來:
.panda::after { animation: after-animate 1s ease-in-out infinite alternate -1s; } @keyframes after-animate { to { background-image: radial-gradient(circle at 2.6em 1.3em, white 0.3em, transparent 0.3em), radial-gradient(circle at 2.6em 1.8em, #333 0.7em, transparent 0.7em), radial-gradient(circle at 2.5em 2em, white 1em, transparent 1em); } }
最后,讓黑眼圈和耳朵也動起來:
@keyframes before-animate { to { transform: rotate(-40deg); } } @keyframes after-animate { to { transform: rotate(40deg); } }
大功告成!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52442.html
摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻教程此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbfmJt?w=400&h=304); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。 https://codepen.io/comeh...
摘要:過往項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書頻演示如何用純創作一種按鈕被瞄準的交互特效視頻演示如何用純創作一個同心圓弧旋轉特效視頻演 過往項目 2018 年 4 月份項目匯總(共 8 個項目) 2018 年 5 月份發布的項目 《前端每日實戰》專欄每天分解一個前端項目,用視頻記錄...
摘要:過往項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書頻演示如何用純創作一種按鈕被瞄準的交互特效視頻演示如何用純創作一個同心圓弧旋轉特效視頻演 過往項目 2018 年 4 月份項目匯總(共 8 個項目) 2018 年 5 月份發布的項目 《前端每日實戰》專欄每天分解一個前端項目,用視頻記錄...
閱讀 1223·2021-11-25 09:43
閱讀 1337·2021-09-26 09:55
閱讀 2330·2021-09-10 11:20
閱讀 3365·2019-08-30 15:55
閱讀 1441·2019-08-29 13:58
閱讀 1164·2019-08-29 12:36
閱讀 2337·2019-08-29 11:18
閱讀 3407·2019-08-26 11:47