如何用純 CSS 創作一臺拍立得照相機
阿新 • • 發佈:2018-12-08
效果預覽
按下右側的“點選預覽”按鈕可以在當前頁面預覽,點選連結可以全屏預覽。
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 個元素,分別代表鏡頭和照片:
<div class="camera">
<span class="lens"></span>
<span class="picture"></span>
</div>
居中顯示:
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);
}
大功告成!
原文地址:https://segmentfault.com/a/1190000015828039