摘要:用偽元素模擬快門增加快門開合動畫效果畫出照片增加打印照片的動畫效果最后,把相機向上挪一點,保持垂直居中大功告成
效果預覽
按下右側的“點擊預覽”按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/YjYgey
可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cpQpGtQ
源代碼下載每日前端實戰系列的全部源代碼請從 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: linear-gradient(to left bottom, linen, tan); }
畫出相機的輪廓:
.camera { width: 20em; height: 23em; font-size: 10px; background: linear-gradient( blanchedalmond, blanchedalmond 10em, wheat 10em, wheat 14em, tan 14em ); border-radius: 2em; }
畫出鏡頭的輪廓:
.camera { position: relative; } .lens { position: absolute; width: 8em; height: 8em; background: radial-gradient( cadetblue 2em, #555 2em, #555 2.5em, #333 2.5em, #333 4em ); border-radius: 50%; top: 3em; left: 6em; }
用線性漸變畫出下方照片的出口:
.camera { background: linear-gradient( transparent 18em, #333 18em, #333 19.5em, transparent 19.5em ) no-repeat center / 80% 100%, linear-gradient( blanchedalmond, blanchedalmond 10em, wheat 10em, wheat 14em, tan 14em ); border-radius: 2em; position: relative; }
接下來修飾細節。
用偽元素畫出相機的取景器和閃光燈:
.camera::before { content: ""; position: absolute; width: 4.5em; height: 2em; background-color: #333; border-radius: 0.5em; top: 1.5em; left: 1.5em; } .camera::after { content: ""; position: absolute; width: 3em; height: 3em; background-color: #333; background-image: radial-gradient( teal 10%, #333 30%, transparent 40% ); right: 1.5em; top: 1.5em; border-radius: 0.3em; }
用徑向漸變畫出相機上的按鈕:
.camera { background: radial-gradient( circle at 17em 7em, black 0.8em, darkgray 0.8em, darkgray 1em, transparent 1em ), radial-gradient( circle at 3.6em 7em, tomato 1em, darkgray 1em, darkgray 1.2em, transparent 1.2em ), linear-gradient( transparent 18em, #333 18em, #333 19.5em, transparent 18em ) no-repeat center / 80% 100%, linear-gradient( blanchedalmond, blanchedalmond 10em, wheat 10em, wheat 14em, tan 14em ); }
用徑向漸變畫出鏡頭上的光影:
.lens { background: radial-gradient( circle at 60% 45%, khaki 0.1em, transparent 0.3em ), radial-gradient( circle at 50% 40%, khaki 0.3em, transparent 0.5em ), radial-gradient( cadetblue 2em, #555 2em, #555 2.5em, #333 2.5em, #333 4em ); }
接下來制作動畫效果。
用偽元素模擬快門:
.lens::before, .lens::after { content: ""; position: absolute; width: 5em; height: 0.1em; background-color: #333; } .lens::before { top: 1em; } .lens::after { bottom: 1em; }
增加快門開合動畫效果:
.lens::before, .lens::after { animation: take-a-photo 3s infinite; } @keyframes take-a-photo { 10% { height: calc(50% - 1em); } 20% { height: 0.1em; } }
畫出照片:
.picture { position: absolute; width: inherit; height: 13em; top: 18em; } .picture::before { content: ""; position: absolute; box-sizing: border-box; width: 15em; height: 15em; background: #555; left: 2.5em; border: solid linen; border-width: 0 1em 2em 1em; bottom: 0; }
增加打印照片的動畫效果:
.picture { height: 0em; overflow: hidden; animation: print 3s infinite; } @keyframes print { 30% { height: 0em; } 80%, 100% { height: 13em; } }
最后,把相機向上挪一點,保持垂直居中:
.camera { transform: translateY(-3em); }
大功告成!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52761.html
摘要:用偽元素模擬快門增加快門開合動畫效果畫出照片增加打印照片的動畫效果最后,把相機向上挪一點,保持垂直居中大功告成 showImg(https://segmentfault.com/img/bVbezK4?w=400&h=300); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。 https://codepen.io/comehope/pen/YjYgey 可交...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書視頻演示如何用純創作一臺咖啡機視頻演示如何用 過往項目 2018 年 6 月份項目匯總(共 27 個項目) 2018 年 5 月份項目匯總(共 30 個項目) 2018 年 4 月份項目匯總(...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書視頻演示如何用純創作一臺咖啡機視頻演示如何用 過往項目 2018 年 6 月份項目匯總(共 27 個項目) 2018 年 5 月份項目匯總(共 30 個項目) 2018 年 4 月份項目匯總(...
閱讀 1264·2021-11-17 09:33
閱讀 1729·2021-09-09 11:53
閱讀 3179·2021-09-04 16:45
閱讀 1357·2021-08-17 10:12
閱讀 2364·2019-08-30 15:55
閱讀 1770·2019-08-30 15:53
閱讀 2397·2019-08-30 15:52
閱讀 2549·2019-08-29 18:41