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);
wid