CSS可以使用動畫效果, 來為網站添加一些互動功能觸發效果, 比如在播放視頻時添加一個播放圖標的動畫. 下面就是一個實現動畫視頻播放圖標的代碼示例:
.playButton { position: relative; width: 80px; height: 80px; border-radius: 50%; background-color: #fff; box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.1); cursor: pointer; transition: all 0.3s ease; } .playButton:before { content: ""; position: absolute; top: 50%; left: 45%; width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 30px; border-color: transparent transparent transparent #000; transform: translateX(-45%) translateY(-50%); transition: all 0.3s ease; } .playButton:hover { box-shadow: 0px 0px 0px 4px rgba(0,0,0,0.1); } .playButton:hover:before { transform: translateX(-50%) translateY(-50%); border-width: 0 0 0 40px; }
以上代碼利用:before偽元素來實現播放圖標的動畫效果. 當鼠標懸浮在播放按鈕上時, 播放按鈕圖標會變為實心黑色三角形來提醒用戶該按鈕可以播放視頻. 動畫使用了CSS中的transition屬性來添加過渡效果. 如果需要實現自定義的視頻播放圖標效果, 也可參考以上代碼實現.