CSS動畫是現(xiàn)代網頁上常見的一種交互方式。通過CSS3中的transition和animation屬性，可以創(chuàng)建出許多炫酷的交互效果，如過渡動畫、旋轉、縮放、淡入淡出等等。下面我們來學一下CSS中如何創(chuàng)建一個簡單的時間效果圖。

.time{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #42b983;
color: #fff;
text-align: center;
line-height: 100px;
font-size: 24px;
position: relative;
overflow: hidden;
}
.time:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid #fff;
z-index: 10;
transform: scale(0);
transition: transform 0.5s cubic-bezier(0.1,0.9,0.2,1);
}
.time:hover:before{
transform: scale(1.5);
}

上面的代碼中，我們首先定義了一個class為time的元素，它的樣式包含了一個圓形的背景、字體顏色、對齊方式等等。接著我們在它的:before偽元素里設置了一個白色的圓形邊框，并給它定義了一個初始狀態(tài)的縮放transform屬性。這樣，當鼠標懸停在.time元素上時，其:before偽元素就變成了一個放大了的白色圓形，形成了一種類似時鐘的效果。

這里我們使用了transition屬性來定義了一個0.5秒的縮放動畫。同時，我們使用了cubic-bezier函數來控制動畫的加速和減速過程，使得動畫更加平滑自然。

通過CSS3的動畫特性，我們可以輕松創(chuàng)建出許多炫酷的效果，只要您稍稍調整一下屬性值，就可以實現(xiàn)自己想要的效果。當然，復雜的動畫效果需要更多的代碼和技巧，有些效果還需要借助JavaScript來實現(xiàn)。但是只要掌握了基礎的CSS3動畫技能，就可以輕松地制作出一些驚艷的效果。