CSS3標題動畫

h1 {
position: relative;
display: inline-block;
}
h1:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
background-color: #000;
top: 50%;
left: 0;
z-index: -1;
}
h1:hover:before {
transform: scaleX(0);
transition: transform .5s ease-in-out;
}

CSS3標題動畫可以使網站標題更加生動，吸引用戶的注意力。最常見的動畫是鼠標懸停時，標題下方的線條消失，實現文字浮起的效果。

上面的代碼實現了一個簡單的標題動畫。首先，將標題設置為inline-block元素，并在其前面添加一個偽元素:before。然后，設置其高度為2px，寬度為100%，顏色為黑色，放置在標題下方中央。

然后，在:hover狀態下，使用CSS3動畫將偽元素的長度縮短至0，使其在0.5秒內消失。這個動畫效果實現了標題下方線條消失，使得文字看起來浮起來的效果。

當然，這只是標題動畫的一個簡單實現，可以通過改變不同屬性，實現不同的動畫效果，使網站更加生動活潑，更吸引用戶點擊。