前端时间做了个 网易云音乐播放器>>>1:1高仿网易云音乐 Windows 桌面版 ,在线预览地址点这里>>> 音乐播放器。这两天准备把用到的功用抽离出来,封装成一个个小组件,便当以后运用。今天暂时先分享一个虚拟播放器的组件。前端显现效果如下:
运用也比拟简单,直接传入 play:播放状态,布尔值;以及 picUrl:封面图片,字符串。即可。源代码如下:
<template> <div class="virtual-player"> <div class="content"> <!-- 支撑图片 --> <img class="player-support" src="../static/img/VirtualPlayer/player-support.png"> <!-- 唱片指针 --> <img :class="['player-bar', { 'play': play }]" src="../static/img/VirtualPlayer/player-bar.png"> <div :class="['virtual-disc', play ? 'play' : 'pause']" ref="virtualDisc"> <div class="outer"> <!-- 虚拟胶片图 --> <div class="middle" :style="'background-image: url('+ require('../static/img/VirtualPlayer/player-film.png') +');'"> <div class="inner"> <img :src="picUrl" > </div> </div> </div> </div> </div> </div> </template> <script> export default{ props:{ play:{ type: Boolean, required: true, default: false }, picUrl:{ type: String, required: true, } } } </script> <style lang="scss" scoped> .virtual-player{ position: relative; transform: translateX(-50%); left: 50%; width: 320px; height: 320px; .content{ margin: 75px 0 0; width: 100%; height: 100%; .player-support{ z-index: 99; position: absolute; transform: translateX(-50%); top: -75px; left: 50%; width: 30px; height: 30px; } .player-bar{ z-index: 9; position: absolute; transform: translateX(-50%); top: -50px; left: 50%; width: 80px; /* 控制虚拟唱片针旋转 */ transform-origin: 0 0; transform: rotate(-30deg); transition: all 0.3s; &.play{ transform: rotate(0); } } .virtual-disc{ position: absolute; width: 100%; height: 100%; /* 控制虚拟唱片旋转 */ animation: rotate 20s linear infinite; &.play{ transform: rotate(5deg); } &.pause{ animation-play-state: paused; } @keyframes rotate { 0%{ transform: rotate(0); } 100% { transform: rotate(1turn); } } .outer{ position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; width: 100%; height: 100%; border-radius: 50%; background-color: #d7d8d9; .middle{ position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; width: calc(100% - 15px); height: calc(100% - 15px); border-radius: 50%; /* background-image: url('../static/img/VirtualPlayer/player-film.png'); */ background-repeat: no-repeat; background-size: cover; .inner{ position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; width: 50%; height: 50%; border: 10px solid #111; border-radius: 50%; background-color: #111; overflow: hidden; img{ width: 100%; height: 100%; } } } } } } } </style>
运用时,留意将代码中的图片地址修正一下即可。
感谢您的来访,获取更多精彩文章请收藏本站。
![](https://www.gyzsq.com/wp-content/uploads/2022/07/9259adea4619.gif)
© 版权声明
本站网络名称:
孤勇者社区
本站永久网址:
https://www.gyzsq.com
网站侵权说明:
本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ324470778删除处理。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
THE END
喜欢就支持一下吧
相关推荐
评论 共1条
![头像](/wp-content/themes/zibll/img/avatar-default.png)
欢迎您留下宝贵的见解!
- 最新
- 最热
只看作者