CSS動(dòng)畫(huà)是現(xiàn)代網(wǎng)頁(yè)上常見(jiàn)的一種交互方式。通過(guò)CSS3中的transition和animation屬性，可以創(chuàng)建出許多炫酷的交互效果，如過(guò)渡動(dòng)畫(huà)、旋轉(zhuǎn)、縮放、淡入淡出等等。下面我們來(lái)學(xué)一下CSS中如何創(chuàng)建一個(gè)簡(jiǎn)單的時(shí)間效果圖。

.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);
}

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

這里我們使用了transition屬性來(lái)定義了一個(gè)0.5秒的縮放動(dòng)畫(huà)。同時(shí)，我們使用了cubic-bezier函數(shù)來(lái)控制動(dòng)畫(huà)的加速和減速過(guò)程，使得動(dòng)畫(huà)更加平滑自然。

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