CSS播放按鈕旋轉是一種常見的UI設計,可以提高用戶體驗。
.play-button { width: 50px; height: 50px; border-radius: 50%; background-color: #333333; position: relative; padding: 15px; } .play-button:before { content: ""; display: block; position: absolute; width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 20px; border-color: transparent transparent transparent #fff; left: 25px; top: 15px; } .play-button:after { content: ""; display: block; position: absolute; width: 10px; height: 10px; border-radius: 50%; background-color: #fff; left: 30px; top: 20px; transition: transform 0.5s ease; } .play-button.playing:after { transform: rotate(360deg); }
代碼中,我們使用:before和:after偽元素分別創建了播放按鈕的尖角和中心圓圈。通過設置:after的transform屬性,我們可以讓圓圈旋轉。