CSS的動畫效果能夠讓網頁更加生動有趣。這里我們將介紹一個用CSS制作蘋果人臉錄入動圖的示例。

/* 定義人臉元素 */
.face {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #FED200;
box-shadow: inset -10px -10px 0px #E0A600;
}
/* 定義眼睛元素 */
.eye {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #FFFFFF;
top: 40%;
left: 35%;
transform: translate(-50%, -50%);
box-shadow: -5px -5px 0px #DAA600;
}
/* 定義瞳孔元素，初始狀態為左眼向右看 */
.pupil {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #000000;
top: 50%;
left: 60%;
transform: translate(-50%, -50%);
box-shadow: 2px 2px 0px #000000;
}
/* 定義表情變化的動畫 */
@keyframes blink {
0% {
transform: scaleY(1);
}
50% {
transform: scaleY(0.1);
}
100% {
transform: scaleY(1);
}
}
/* 定義眨眼動畫 */
.eye {
animation: blink 2s infinite;
}
/* 定義表情變化為驚訝的動畫 */
@keyframes surprise {
0% {
transform: rotate(0deg);
top: 40%;
}
50% {
transform: rotate(5deg);
top: 35%;
}
100% {
transform: rotate(0deg);
top: 40%;
}
}
/* 定義表情變為驚訝的觸發器，通過JS改變樣式類來觸發 */
.face.surprise .pupil {
left: 30%;
}
.face.surprise .eye {
top: 45%;
}
.face.surprise .eye::before,
.face.surprise .eye::after {
transform-origin: bottom center;
animation: surprise 0.5s ease-in-out 0s 1 normal forwards;
}
/* 構建人臉 */

以上就是CSS制作蘋果人臉錄入動圖的完整代碼。通過設置元素的樣式和定義動畫，我們實現了眼睛眨動和表情變化的效果。你也可以根據自己的想法和創意，調整其中的參數和樣式，創作出更加有趣的動畫效果。