HTML 中有很多種動畫效果的代碼，今天我們就來講一講其中幾種比較常用的動畫效果代碼。
首先，我們要使用 pre 標簽來顯示代碼。pre 標簽會保留代碼中的空格和換行符，非常適合顯示代碼。下面是一段簡單的 HTML 代碼，用于創建一個矩形的動畫效果：
<!DOCTYPE html>
<html>
<head>
<style>
.square {
width: 50px;
height: 50px;
background-color: #333;
position: relative;
animation: move 2s infinite;
}
@keyframes move {
0% {
left: 0;
}
50% {
left: 50%;
}
100% {
left: 100%;
}
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>這段代碼使用了 animation 屬性和 @keyframes 關鍵字來創建動畫。animation 屬性用于指定動畫名稱、動畫時長、動畫速度曲線以及動畫狀態等。而 @keyframes 關鍵字用于定義動畫的關鍵幀，即動畫從開始到結束的變化過程。
另外，我們還可以使用 transition 屬性來實現一些簡單的動畫效果。下面是一個示例，用于讓圖片縮小并變成黑白的效果：<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
transition: all 2s;
}
img:hover {
transform: scale(0.8);
filter: grayscale(100%);
}
</style>
</head>
<body>
<img src="image.jpg">
</body>
</html>這段代碼使用了 transition 屬性和 :hover 偽類選擇器，分別用于指定元素的過渡效果和鼠標懸停狀態下的效果。其中，transform 屬性用于縮小圖片大小，而 filter 屬性則用于將圖片變成黑白色。
除了以上兩種動畫效果的代碼，還有很多其他的代碼可以實現更加絢麗的動畫效果。不過，無論哪種動畫效果，我們都需要注意代碼的兼容性和性能優化，以確保網頁的加載速度和用戶體驗。下一篇mysql過濾某個字段