论坛 › 音乐沙龙 › 巫娜：静水流深

马黑黑 发表于 2022-8-1 20:10

巫娜：静水流深

<style>
#papa { left: -214px; width: 1024px; height: 600px; display: grid; place-items: center; background: linear-gradient(to top right, #ccc,#336699,#993366); box-shadow: 3px 3px 26px #000; position: relative; }
#mama { position: absolute; width: 424px; height: 424px; background: radial-gradient(at 40% 30%, lightgreen, transparent); transition: all 3s; }
#disc { position: absolute; right: 50%; top: 50%; width: 60px; height: 60px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; opacity: 0; transition: top 4s, right 4s; animation: rot 2s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <span id="disc"></span>
        <span id="mama"></span>
</div>

<script>

let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=304901.mp3';
aud.loop = true;
aud.autoplay = true;

disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
setTimeout(change,100);
setTimeout(toCorner,3000);

disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');

function change() {
        mama.style.transform = 'rotate(45deg)';
        mama.style.borderRadius = '50%';
        mama.style.boxShadow = '-30px 30px 50px #444';
}

function toCorner() {
        disc.style.opacity = '1';
        disc.style.top = '10px';
        disc.style.right = '10px';
}
</script>

闲言不语 发表于 2022-8-1 20:18

这有个沙发，正好做下歇一下。小二，来杯冰镇王老吉{:4_189:}

闲言不语 发表于 2022-8-1 20:18

巫娜的音乐俺稀饭{:4_199:}

红影 发表于 2022-8-1 20:35

这变形效果真漂亮，从中还能飞出一张漂亮的动态光盘。黑黑又带来新效果{:4_187:}

马黑黑 发表于 2022-8-1 20:40

红影 发表于 2022-8-1 20:35
这变形效果真漂亮，从中还能飞出一张漂亮的动态光盘。黑黑又带来新效果

这个简洁的

马黑黑 发表于 2022-8-1 20:40

闲言不语 发表于 2022-8-1 20:18
这有个沙发，正好做下歇一下。小二，来杯冰镇王老吉

菜花，上酸菜{:4_170:}

马黑黑 发表于 2022-8-1 20:41

闲言不语 发表于 2022-8-1 20:18
巫娜的音乐俺稀饭

韵味

闲言不语 发表于 2022-8-1 20:44

马黑黑 发表于 2022-8-1 20:40
菜花，上酸菜

马黑，来杯干红吧{:4_176:}{:4_189:}

马黑黑 发表于 2022-8-1 20:51

闲言不语 发表于 2022-8-1 20:44
马黑，来杯干红吧

喝起

千羽 发表于 2022-8-1 21:07

大方块化成大圆球，再飞出小圆碟，好漂亮啊{:4_187:}

小辣椒 发表于 2022-8-1 21:20

黑黑又一个新效果{:4_178:}

加林森 发表于 2022-8-1 21:32

又是一个新的制作。太有意思了。{:4_199:}

马黑黑 发表于 2022-8-1 21:42

加林森 发表于 2022-8-1 21:32
又是一个新的制作。太有意思了。

球球好看吧？吹弹可破

马黑黑 发表于 2022-8-1 21:45

小辣椒 发表于 2022-8-1 21:20
黑黑又一个新效果

这个感觉不复杂

马黑黑 发表于 2022-8-1 21:46

千羽 发表于 2022-8-1 21:07
大方块化成大圆球，再飞出小圆碟，好漂亮啊

动画元素仅在开头有

加林森 发表于 2022-8-1 21:46

马黑黑 发表于 2022-8-1 21:42
球球好看吧？吹弹可破

漂亮。你的球球多。{:4_189:}

马黑黑 发表于 2022-8-1 21:52

加林森 发表于 2022-8-1 21:46
漂亮。你的球球多。

{:4_170:}

小辣椒 发表于 2022-8-1 21:55

马黑黑 发表于 2022-8-1 21:45
这个感觉不复杂

但我感觉怎么才可以用图图上去

加林森 发表于 2022-8-1 21:58

马黑黑 发表于 2022-8-1 21:52


{:4_172:}

红影 发表于 2022-8-1 22:46

马黑黑 发表于 2022-8-1 20:40
这个简洁的

是的，简洁又漂亮。

查看完整版本: 巫娜：静水流深