Nexus,
Скажите пожалуйста, а могли бы вы ещё помочь с тем чтобы эта картинка cover.png и была самой кнопкой Play ? А то я вот всё вожусь с того момента как вы написали, но что-то не смог так сделать( |
Puzzle, элемент с классом:
js-rotatable-image - вращаемый элемент; js-play-button - элемент, при нажатии на который вращение начнется/продолжится; js-pause-button - элемент, при нажатии на который вращение прекратится. На странице может быть только 1 элемент с перечисленными классами (если будет несколько, то браться будет первый попавшийся). Цитата:
Цитата:
|
Вот идея с одной кнопкой включения/выключения и вращением диска-картинки...
<button class="radio-controls-play-button"></button> <script> document.addEventListener("click", event =>{ if(event.target.matches(".radio-controls-play-button")) event.target.classList.toggle("play"); }); </script> <style> .radio-controls-play-button { position: relative; padding: 1em; } .radio-controls-play-button::before { content: ""; background: url(https://is3-ssl.mzstatic.com/image/thumb/Purple118/v4/0c/f5/f4/0cf5f426-a35d-b047-b383-09a4f5e428d6/AppIcon-1x_U007emarketing-85-220-8.png/246x0w.jpg) center / cover; width: 10em; height: 10em; border-radius: 100%; display: block; animation: 5s rotate linear infinite; animation-play-state: paused; } .radio-controls-play-button.play::before { animation-play-state: running; } .radio-controls-play-button::after { content: "▶\fe0f"; position: absolute; top: 50%; left: 50%; font-size: xx-large; transform: translate(-50%, -50%); } .radio-controls-play-button.play::after { content: "⏸\fe0f"; } @keyframes rotate { to { transform: rotate(1turn); } } </style> |
Часовой пояс GMT +3, время: 12:12. |