在CSS中，可以使用多種方式來實現圖片的動畫效果。其中，最常用的方法就是使用CSS3的transition和animation屬性。下面，我們就來看看如何使用這兩個屬性來實現三張圖片的動畫效果。
<html>
<head>
<style>
/* 定義三個不同的圖片樣式 */
.img1 {
width: 200px;
height: 200px;
background-image: url("img1.jpg");
background-size: cover;
transition:all 1s ease;
}
.img2 {
width: 200px;
height: 200px;
background-image: url("img2.jpg");
background-size: cover;
transition:all 1s ease;
}
.img3 {
width: 200px;
height: 200px;
background-image: url("img3.jpg");
background-size: cover;
transition:all 1s ease;
}
/* 定義兩個動畫效果 */
@keyframes changeSize {
0% { transform: scale(1,1); }
50% { transform: scale(1.2,1.2); }
100% { transform: scale(1,1); }
}
@keyframes changeColor {
0% { background-color: red; }
50% { background-color: blue; }
100% { background-color: green; }
}
/* 鼠標懸停時的效果 */
.img1:hover {
border-radius: 50%;
}
.img2:hover {
transform: rotate(360deg);
}
.img3:hover {
animation: changeSize 2s infinite;
}
/* 點擊時的效果 */
.img1:active {
filter: brightness(50%);
}
.img2:active {
animation: changeColor 3s infinite;
}
.img3:active {
transform: skewX(30deg);
}
</style>
</head>
<body>
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
</body>
</html>上面的代碼中，我們首先定義了三個不同的圖片樣式，并使用transition屬性為它們添加了一個1秒鐘的漸變效果。然后，我們又定義了兩個不同的動畫效果，分別是changeSize和changeColor。其中，changeSize是一個改變大小的動畫，而changeColor則是一個改變顏色的動畫。
在鼠標懸停時，我們又為每個圖片樣式添加了不同的效果。例如，當鼠標懸停在img1上時，圖片會變成一個圓形；當鼠標懸停在img2上時，圖片會360度旋轉；而當鼠標懸停在img3上時，則會一直運行changeSize動畫。
在點擊時，我們同樣為每個圖片樣式添加了不同的效果。例如，當點擊img1時，圖片會變暗；當點擊img2時，圖片會一直運行changeColor動畫；而當點擊img3時，則會沿著X軸傾斜30度。
綜上所述，通過CSS3的transition和animation屬性，我們可以為單張或多張圖片添加不同的動畫效果，從而在網頁中實現生動、有趣的效果。
上一篇css三原色