一個音樂播放器Vue實現(音樂唱片,點選下面播放,中間的圖片可以轉起來。)
阿新 • • 發佈:2019-01-08
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