终于找到一个本站可以听的音乐

醉美水芙蓉 发表于 2022-5-15 13:28

本帖最后由醉美水芙蓉于 2022-5-15 13:28 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"> <style>
.stage{
   margin: auto;
   position: relative;
   left: -214px;
   width: 1044px;
   height: 550px;
   background: #666 url('https://img-baofun.zhhainiao.com/fs/5facb1cbbeb4412265eb6b985c750721.jpg') no-repeat center/cover;
   perspective: 3000px;
   perspective-origin: 50% 50%;

}
.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: 50px;
   top: 460px;
   cursor: pointer;
   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 = 'http://music.163.com/song/media/outer/url?id=1843302755.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>

</td></tr></table>

大猫咪 发表于 2022-5-15 13:44

好听的歌制作真漂亮，氺芙蓉真棒！

{:4_204:}{:4_199:}

醉美水芙蓉 发表于 2022-5-15 14:04

大猫咪发表于 2022-5-15 13:44
好听的歌制作真漂亮，氺芙蓉真棒！

大猫咪下午好！

小辣椒 发表于 2022-5-15 14:17

水芙蓉有代码基础，这个套用是不难的，以后多多的制作哦

醉美水芙蓉 发表于 2022-5-15 14:20

小辣椒发表于 2022-5-15 14:17
水芙蓉有代码基础，这个套用是不难的，以后多多的制作哦

可是好多音乐外链本站不支持！

小辣椒 发表于 2022-5-15 14:21

你这个图图原件可以改一下尺寸，你现在1920X1080 其实实际尺寸不用怎么大，怕电脑卡的朋友出来会慢

小辣椒 发表于 2022-5-15 14:22

醉美水芙蓉发表于 2022-5-15 14:20
可是好多音乐外链本站不支持！

不会啊，队长黑黑都是外面的音乐链接

醉美水芙蓉 发表于 2022-5-15 14:26

小辣椒发表于 2022-5-15 14:21
你这个图图原件可以改一下尺寸，你现在1920X1080 其实实际尺寸不用怎么大，怕电脑卡的朋友出来会慢

改了没有地方上传？

小辣椒 发表于 2022-5-15 14:29

醉美水芙蓉发表于 2022-5-15 14:26
改了没有地方上传？

快速寻找音乐图片和上传音乐
https://www.huachaowang.com/forum.php?mod=viewthread&tid=50563&fromuid=4275
(出处: 花潮论坛)

小辣椒 发表于 2022-5-15 14:30

先下了，晚上见

加林森 发表于 2022-5-15 15:25

好听好看，真不错！

红影发表于 2022-5-15 16:57

水芙蓉也做成了线圈按钮，真棒。好听的歌儿{:4_187:}

页: [1]

花潮论坛's Archiver

终于找到一个本站可以听的音乐