一个音乐播放器Vue实现（音乐唱片，点击下面播放，中间的图片可以转起来。）

https://www.jb51.net/article/134491.htm
需求：做一个类似于下图所示的音乐唱片，中间暂时用本地图片，点击下面播放，中间的图片可以转起来。
效果：

html

<div id="musicImage">
	<div class="song-img" style="background-image:url(./images/music.jpg)" ref="rotate"></div>
</div>

css

#musicImage {
	margin: 0 auto;
	margin-top: 30%;
	width: 15em;
	height: 15em;
	border-radius: 240px;
	transform: rotate(45deg);
	background-image: radial-gradient(3.5em 30em ellipse, #fff, #000);
	border: 2px solid #131313;
	box-shadow: 0 0 0 10px #343935;
	opacity: 0.7;
}

.song-img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform-origin: center center;
	transform: translate(-50%, -50%) rotate(0deg);
	width: 160px;
	height: 160px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	border: 2px solid #000;
	border-radius: 200px;
	animation: animations1 10s linear infinite forwards;
	animation-play-state: paused;
}

@keyframes animations1 {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	50% {
		transform: translate(-50%, -50%) rotate(180deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

javascript

methods: {
	play() {
		this.$refs.audio.play();
		this.audio.playing = true;
		this.$refs.rotate.style.animationPlayState = 'running';
	},
	pause() {
		this.$refs.audio.pause();
		this.$refs.rotate.style.animationPlayState = 'paused';
		this.audio.playing = false;
	},
}

参考我上一篇文章：https://mp.csdn.net/mdeditor/84832114#
歌词lrc，歌曲百度云下载链接
https://tieba.baidu.com/p/5114993840?red_tag=0229698170

css3动画应用-音乐唱片旋转播放特效
http://www.mamicode.com/info-detail-1455297.html