CSS可以實現(xiàn)許多有趣的效果，今天我們來學(xué)習(xí)一下如何使用CSS實現(xiàn)相機關(guān)閉的效果。

.camera {
width: 200px;
height: 200px;
position: relative;
}
.lens {
width: 100%;
height: 100%;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
background-color: #000;
box-shadow: 0 0 20px #000;
animation: close-lens 2s ease forwards;
}
.flash {
width: 25%;
height: 25%;
border-radius: 50%;
position: absolute;
top: 10%;
right: 10%;
background-color: #fff;
box-shadow: 0 0 20px #fff;
animation: close-flash 2s ease forwards;
}
@keyframes close-lens {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes close-flash {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0);
opacity: 0;
}
}

我們定義了一個相機的容器，容器里面包含了一個鏡頭和一個閃光燈，通過CSS的動畫效果來實現(xiàn)相機關(guān)閉的效果。

首先我們定義了相機容器的大小和相對定位，鏡頭和閃光燈都是絕對定位，并且設(shè)置了圓形的邊框和陰影效果。接著我們定義了兩個關(guān)鍵幀(close-lens和close-flash)，鏡頭和閃光燈的動畫效果都在這兩個關(guān)鍵幀中設(shè)置。通過動畫的縮放效果，實現(xiàn)了相機關(guān)閉的動畫效果。

放置一個div作為相機容器:

<div class="camera">
<div class="lens"></div>
<div class="flash"></div>
</div>

在HTML中添加相機容器，然后就可以看到相機關(guān)閉的效果了。

以上就是CSS實現(xiàn)相機關(guān)閉的效果的方法，希望本篇文章對大家有所幫助。