摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽??山换ヒ曨l此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
效果預覽
按下右側的“點擊預覽”按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/WgdVyx/
可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/c23zLuN
源代碼下載每日前端實戰系列的全部源代碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom,容器中的 5 個 .finger 元素代表 5 根手指,.thumb 元素代表大拇指,.palm 元素代表手掌:
居中顯示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(white, lightcyan); }
定義容器尺寸,其中 outline 屬性是輔助線:
.hand { width: 16em; height: 8em; font-size: 10px; outline: 1px dashed black; }
畫出手掌:
.hand { position: relative; color: darksalmon; } .palm { position: absolute; width: 8em; height: 6em; background-color: currentColor; border-radius: 1em 4em; right: 0; }
畫出大拇指的輪廓:
.thumb { position: absolute; width: 9.6em; height: 3.2em; background-color: currentColor; border-radius: 3em 2em 2em 1em; right: 0; bottom: 1em; transform-origin: calc(100% - 2em) 2em; transform: rotate(-20deg); border-bottom: 0.2em solid rgba(0, 0, 0, 0.1); border-left: 0.2em solid rgba(0, 0, 0, 0.1); }
畫出大拇指上的指甲:
.thumb::before { content: ""; position: absolute; width: 1.9em; height: 1.9em; background-color: rgba(255, 255, 255, 0.3); border-radius: 60% 10% 10% 30%; bottom: -0.3em; left: 0.5em; border-right: 0.1em solid rgba(0, 0, 0, 0.1); }
畫出食指靠近手掌的后半部分:
.finger:not(:first-child) { position: absolute; width: 6.4em; height: 3.5em; background-color: currentColor; right: 5.2em; bottom: 4em; transform-origin: 100% 2em; transform: rotate(10deg); }
畫出食指的前半部分:
.finger:not(:first-child)::before { content: ""; position: absolute; width: 9em; height: 3em; background-color: currentColor; right: 4.2em; top: 0.2em; border-radius: 2em; transform-origin: calc(100% - 2em) 2em; transform: rotate(-60deg); }
為除大拇指以外其他 4 根手指設置下標變量,從食指到小指逐漸縮小并且顏色加深:
.finger:not(:first-child) { --scale: calc(1 - (5 - var(--n)) * 0.2); transform: rotate(10deg) scale(var(--scale)); filter: brightness(calc(100% - (5 - var(--n)) * 10%)); } .finger:nth-child(2) { --n: 2; } .finger:nth-child(3) { --n: 3; } .finger:nth-child(4) { --n: 4; } .finger:nth-child(5) { --n: 5; }
用偽元素畫出手的陰影:
.hand::before { content: ""; position: absolute; width: 14em; height: 4.5em; background-color: black; border-radius: 4em 1em; top: 4em; filter: blur(1em) opacity(0.3); }
增加手指敲擊桌面的動畫效果:
.finger:not(:first-child) { animation: tap-upper 1.2s ease-in-out infinite; animation-delay: calc((var(--n) - 2) * 0.1s); } @keyframes tap-upper { 0%, 50%, 100% { transform: rotate(10deg) scale(var(--scale)); } 40% { transform: rotate(50deg) scale(var(--scale)); } }
最后,不要忘記刪掉輔助線。
大功告成!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54648.html
摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbgKsi?w=400&h=299); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。 https://codepen.io/comehop...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書 過往項目 2018 年 8 月份項目匯總(共 29 個項目) 2018 年 7 月份項目匯總(共 29 個項目) 2018 年 6 月份項目匯總(...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書 過往項目 2018 年 8 月份項目匯總(共 29 個項目) 2018 年 7 月份項目匯總(共 29 個項目) 2018 年 6 月份項目匯總(...
閱讀 3267·2023-04-25 14:35
閱讀 3417·2021-11-15 18:00
閱讀 2537·2021-11-12 10:34
閱讀 2481·2021-11-11 16:54
閱讀 3464·2021-10-08 10:12
閱讀 2762·2021-09-06 15:02
閱讀 3318·2021-09-04 16:48
閱讀 2799·2019-08-29 14:02