小辣椒 发表于 2021-10-10 22:16
猫猫你兼容模式欣赏没有问题的
是的，现在好了辣椒{:4_179:}
加林森 发表于 2021-10-10 22:15
清舟晚上好。我在试一试能不能做成功呢。
很成功，这个播放器漂亮了
本帖最后由 加林森 于 2022-4-9 00:19 编辑 <br /><br />小辣椒 发表于 2021-10-10 22:15
队长，这个图图你就百度就可以了，现在的图图像素不行
就是，我也发现了。我是先试一试这个大图片能不能发出来的。
<style>
.stage{
margin: auto;
position: relative;
left: -214px;
width: 1024px;
height: 682px;
background: #666 url('https://pic.imgdb.cn/item/6250593f239250f7c54ef76c.jpg') no-repeat center/cover;
perspective: 3000px;
perspective-origin: 50% 50%;
cursor: pointer;
}
.stage::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url('https://638183.freep.cn/638183/Pic/2022/smoke1.gif') no-repeat center/cover;
opacity: .1;
}
.circle {
--x: 80px;
position: absolute;
width: var(--x);
height: var(--x);
left: 20px;
top: 20px;
transform-style: preserve-3d;
animation: rot 5s linear infinite;
}
.circle div {
position: absolute;
width: 100%;
height: 100%;
border: 1px solid skyblue;
border-radius: 50%;
padding: 0;
}
.circle div:nth-child(1){ transform:rotateY(0deg);}
.circle div:nth-child(2){ transform:rotateY(30deg);}
.circle div:nth-child(3){ transform:rotateY(60deg);}
.circle div:nth-child(4){ transform:rotateY(90deg);}
.circle div:nth-child(5){ transform:rotateY(120deg);}
.circle div:nth-child(6){ transform:rotateY(150deg);}
@keyframes rot{
0%{ transform: rotateZ(30deg) rotateY(0turn);}
100%{ transform: rotateZ(30deg) rotateY(1turn);}
}
</style>
<div class="stage">
<div class="circle">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<script>
var au = document.createElement('audio');
au.src = 'https://music.163.com/song/media/outer/url?id=1931195475.mp3';
au.loop = true;
au.autoplay = true;
document.querySelector('.stage').appendChild(au);
document.querySelector('.circle').onclick = function() {
au.paused ? (au.play(), this.style.animationPlayState = 'running') : (au.pause(), this.style.animationPlayState = 'paused');
}
</script>
绿叶清舟 发表于 2021-10-10 22:17
很成功，这个播放器漂亮了
嗯嗯，我跟着小辣椒学习的。终于成功了。万岁！{:4_170:}
加林森 发表于 2021-10-10 21:56
红影，现在我找了一幅大的图片。你来看看。
嗯嗯，现在好多了。播放器还能调一下位置，放在心形下面更好点{:4_187:}
红影 发表于 2021-10-10 22:21
嗯嗯，现在好多了。播放器还能调一下位置，放在心形下面更好点
嗯嗯，我再慢慢调试。谢谢红影！{:4_204:}
加林森 发表于 2021-10-10 22:27
嗯嗯，我再慢慢调试。谢谢红影！
不客气啊，学会了，以后做帖子就方便了呢。
红影 发表于 2021-10-10 22:32
不客气啊，学会了，以后做帖子就方便了呢。
是的
加林森 发表于 2021-10-10 21:49
终于制作出来了，累！
队长辛苦了，哈哈~~~开始感觉累，后面熟练了就不会累就开心了{:4_173:}
加林森 发表于 2021-10-10 22:38
是的
看到了现在弄好的，做的很漂亮{:4_187:}
小辣椒 发表于 2021-10-10 22:39
队长辛苦了，哈哈~~~开始感觉累，后面熟练了就不会累就开心了
嗯嗯，谢谢小辣椒鼓励！{:4_204:}
红影 发表于 2021-10-10 22:41
看到了现在弄好的，做的很漂亮
谢谢红影鼓励！
大猫咪 发表于 2021-10-10 22:16
是的，现在好了辣椒
好了啊，那就最好了
红影 发表于 2021-10-10 22:41
看到了现在弄好的，做的很漂亮
亲爱的~~现在换了https的上传，所以可以直接看见，但极速模式的歌曲名称回看不见，那和不要写歌曲名称，反正帖子里面有
加林森 发表于 2021-10-10 22:47
嗯嗯，谢谢小辣椒鼓励！
队长不客气
手机电脑模式能看到图，听不见音乐
小辣椒 发表于 2021-10-10 22:52
队长不客气
嗯嗯，不说了！{:4_204:}{:4_204:}{:4_204:}
好开心 发表于 2021-10-10 22:53
手机电脑模式能看到图，听不见音乐
音乐有点慢
好开心 发表于 2021-10-10 22:53
手机电脑模式能看到图，听不见音乐
是的，这个是swf播放器，手机听不到的
加林森 发表于 2021-10-10 22:47
谢谢红影鼓励！
队长加油{:4_204:}