Показать сообщение отдельно
  #13 (permalink)  
Старый 08.02.2019, 14:08
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Вот идея с одной кнопкой включения/выключения и вращением диска-картинки...

<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>
Ответить с цитированием