最近，抖音播放器的UI設(shè)計(jì)更新了！不僅加入了新的控制按鈕，還在播放視頻時(shí)增加了特效，主要是圍繞視頻播放時(shí)旋轉(zhuǎn)的特效，讓人目不暇接。

這個(gè)旋轉(zhuǎn)特效主要是使用CSS3實(shí)現(xiàn)的。在抖音播放器里，有一個(gè)類名為“dy-player-rotate”的div元素，它包裹著播放器中的所有元素，包括視頻和控制按鈕。

.dy-player-rotate {
animation: rotate 1.5s linear infinite;
}
@keyframes rotate {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

上面的代碼展現(xiàn)了如何使用CSS3動(dòng)畫實(shí)現(xiàn)旋轉(zhuǎn)特效。在抖音播放器里，這個(gè)特效是無限循環(huán)的，也就是每轉(zhuǎn)完一圈又從0度開始轉(zhuǎn)。

不過，這些CSS3屬性是只在最新版本的瀏覽器中支持的。如果在不支持這些屬性的瀏覽器中觀看抖音視頻，你只能看到一個(gè)普通的播放器而已。

總之，抖音的UI設(shè)計(jì)以及這個(gè)旋轉(zhuǎn)特效讓人印象深刻，也讓我們了解到CSS3的一些妙用。不過，在兼容性上需要好好打算，以免影響用戶的觀看體驗(yàn)。