如水的音乐（学习黑黑按钮制作）TO：大猫咪
<style>.stage{
margin: auto;
position: relative;
top:150px;left:-215px;
width: 1087px;
height: 552px;
background: #666 url('https://wj.zp68.com/lxx/yunhua/2022/05/15/44IF.gif') no-repeat center/cover;
perspective: 3000px;
perspective-origin: 50% 50%;
}
.stage::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url(' ') no-repeat center/cover;
opacity: .1;
}
.circle {
--x: 80px;
position: absolute;
width: var(--x);
height: var(--x);
left: 850px;
top: 420px;
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 = 'https://wj.zp68.com/lxx/yunhua/2022/05/15/001.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></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
谢谢黑黑~~套用猫猫的发帖代码，谢谢猫猫@大猫咪 黑黑，小辣椒还是套用了代码，直接做一个了@马黑黑 用了岁月的音乐和粒子效果@走过岁月
温馨夜晚，如水的音乐
https://www.huachaowang.com/forum.php?mod=viewthread&tid=59459&fromuid=4275
(出处: 花潮论坛)
今天完成任务了，早点下了，大家晚安！ 谢谢辣椒{:4_187:}制作太漂亮了 {:4_190:} 唯美的画面，空灵飘逸旋律，
心在如水的音符里荡漾，让心情明净而又清澈！ 真棒！
{:4_204:}{:4_199:}{:4_179:} 画面优美，且动感十足，好创意，好作品！赞32个。 如诗如画，如梦境，真棒！收藏了！
谢谢辣椒辛苦了！好好休息，注意身体！
{:4_204:}{:4_199:} 亲爱的把岁月最新的粒子效果用上了，这个做得真美{:4_199:} 划船的是不是辫子哥哥？{:4_189:} 漂亮！{:5_116:} 这个好有梦幻的感觉，恍如仙境{:4_199:} 勤快的小辣椒又出作品 加个划船让画面更生动，小辣椒的想法总是那么多，赞 还有小鸟，播放按钮也不错，小辣椒好棒 大猫咪 发表于 2022-5-14 21:44
谢谢辣椒制作太漂亮了唯美的画面，空灵飘逸旋律，
心在如水的音符里荡漾，让心情 ...
谢谢猫猫的代码我套用你的{:4_179:} 马黑黑 发表于 2022-5-14 21:51
画面优美，且动感十足，好创意，好作品！赞32个。
谢谢黑黑，都是你的精美源码分享，小辣椒第一次碰到这么高才的愿意分享的高手，感谢黑黑，因为有你大家学习都很开心
来个大大的{:4_179:}表示感谢 大猫咪 发表于 2022-5-14 22:03
如诗如画，如梦境，真棒！收藏了！
谢谢辣椒辛苦了！好好休息，注意身体！
猫猫这个真不辛苦，岁月的粒子效果，黑黑的源码 你的代码套用，小辣椒都是占你们的光{:4_179:} 小辣椒 发表于 2022-5-15 13:15
谢谢猫猫的代码我套用你的
辣椒来了 {:4_187:}周末快乐！ 不客气的 都是跟老黑学习的，辣椒融图创意很棒！赏心悦目
特别喜欢！
{:4_204:}{:4_199:}{:4_179:}