摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。源代碼下載每日前端實戰系列的全部源代碼請從下載代碼解讀定義,容器中包含個元素,分別代表機體按鈕支腿手柄和面包。
效果預覽
按下右側的“點擊預覽”按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/OEBJRN
可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/c6bkqT2
源代碼下載每日前端實戰系列的全部源代碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom,容器中包含 5 個元素,分別代表機體、按鈕、支腿、手柄和面包。
居中顯示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(to right bottom, moccasin, teal); }
定義容器尺寸:
.toaster { width: 30em; height: 30em; background-color: snow; font-size: 10px; border-radius: 50%; }
畫出機體:
.toaster { position: relative; } .body { width: 16em; height: 14em; background-color: seagreen; position: absolute; top: 10em; left: 6em; border-radius: 2.5em; border-right: 1.5em solid darkgreen; }
畫出按鈕:
.button { width: 2.5em; height: 2.5em; background-color: tomato; position: absolute; top: 13em; left: 16em; border-radius: 50%; }
畫出支腿:
.legs::before, .legs::after { content: ""; position: absolute; width: 1.5em; height: 2em; background: tomato; top: 24em; } .legs::before { left: 9em; } .legs::after { right: 10em; }
畫出手柄:
.handle { width: 4.2em; height: 1.8em; background-color: tomato; position: absolute; top: 12em; right: 2.4em; border-radius: 0 0.6em 0.6em 0; }
畫出面包:
.toaster { z-index: 1; } .toast { width: 9em; height: 6em; background-color: gold; position: absolute; top: 4em; left: 10em; border-radius: 2em 2em 0 0; border-right: 0.6em solid goldenrod; z-index: -1; }
為機體增加一些光影:
.body::before, .body::after { content: ""; position: absolute; width: 5em; height: 5em; border: 0.6em solid transparent; border-radius: 50%; border-left-color: white; } .body::before { transform: rotate(40deg); top: 1em; left: 1em; } .body::after { bottom: 1em; right: 1em; transform: rotate(210deg); }
定義動畫效果:
@keyframes bake { 0%, 20% { transform: translateY(0); } 80%, 100% { transform: translateY(6em); } }
最后,把動畫效果應用到手柄和面包上:
.handle { animation: bake 3s infinite alternate; } .toast { animation: bake 3s infinite alternate; }
大功告成!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52554.html
摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。源代碼下載每日前端實戰系列的全部源代碼請從下載代碼解讀定義,容器中包含個元素,分別代表機體按鈕支腿手柄和面包。 showImg(https://segmentfault.com/img/bVbcL0M?w=500&h=500); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。 https...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書視頻演示如何用純創作一個表達懷念童年心情的條紋彩虹心特效視頻演示如 過往項目 2018 年 5 月份項目匯總(共 30 個項目) 2018 年 4 月份項目匯總(共 8 個項目) 2018 年 6 月份發布的項目 ...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書視頻演示如何用純創作一個表達懷念童年心情的條紋彩虹心特效視頻演示如 過往項目 2018 年 5 月份項目匯總(共 30 個項目) 2018 年 4 月份項目匯總(共 8 個項目) 2018 年 6 月份發布的項目 ...
閱讀 3684·2021-10-09 09:44
閱讀 3344·2021-09-22 15:29
閱讀 3116·2019-08-30 15:54
閱讀 3018·2019-08-29 16:19
閱讀 2142·2019-08-29 12:50
閱讀 594·2019-08-26 14:04
閱讀 1696·2019-08-23 18:39
閱讀 1344·2019-08-23 17:59