HTML是一種標記語言，它可以用來創建網頁。其中最重要的一部分是標簽。今天我們來學習如何用HTML代碼制作皮卡丘動態效果。
<!DOCTYPE html>
<html>
<head>
<title>皮卡丘動態效果</title>
<style>
body {
background-color: #ffe300;
}
.pika {
width: 150px;
height: 130px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation: pika 2s infinite;
}
.pika img {
position: absolute;
top: 0;
left: 0;
animation: tail 0.5s steps(2) infinite;
}
.pika .cheek {
width: 31px;
height: 30px;
border: 3px solid black;
background-color: #ee5b5c;
position: absolute;
top: 40px;
left: 12px;
border-radius: 50%;
animation: blink 2s infinite;
}
@keyframes pika {
0% {
box-shadow: -40px 50px 0 0 black;
}
50% {
box-shadow: -70px 40px 0 0 black;
}
100% {
box-shadow: -40px 50px 0 0 black;
}
}
@keyframes blink {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
@keyframes tail {
0%, 50%, 100% {
transform: rotate(0deg);
}
25%, 75% {
transform: rotate(20deg);
}
}
</style>
</head>
<body>
<div class="pika">
<img src="https://img.icons8.com/color/50/000000/pikachu-pokemon.png" alt="皮卡丘圖片" />
<div class="cheek"></div>
</div>
</body>
</html>首先，我們給HTML頁面設定一個背景顏色。然后，我們用CSS樣式語言將圖片和臉頰的區域添加到頁面上，并設置其樣式。我們將圖片和臉頰放在一個DIV容器中，并將其放置在頁面的中央。我們使用“animation”在CSS中對皮卡丘進行動畫處理。我們設置了3種關鍵幀。根據皮卡丘的動作，我們在CSS中為容器和臉頰設定不同的動畫。
最后，這段HTML代碼將創建出一個可愛的動態皮卡丘效果，圖像會在頁面上來回移動，并會不停地眨眼和搖尾巴。這樣的效果可以增加頁面趣味性和吸引力，讓用戶更加喜歡您的網頁。