朵拉 发表于 2024-10-13 19:46

Пустота（学习马黑黑647号宇宙效果）

本帖最后由 朵拉 于 2024-10-27 23:01 编辑 <br /><br /><style>
#tz { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; box-sizing: border-box; filter: drop-shadow(3px 3px 4px gray); position:relative; display: block; }
#bg { animation: move 20s linear forwards; }
#player { cursor: pointer; animation: rot 10s linear infinite var(--state); }
#light { opacity: 0; animation: flash .2s 22s infinite var(--state); }
@keyframes move { to { x: -512; y: -320;} }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes flash { to { filter: brightness(2); } }
</style>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2140076810" autoplay loop></audio>
<svg viewBox="-512 -320 1024 500" id="tz" xmlns="http://www.w3.org/2000/svg">
        <defs>
                <g id="light">
                        <ellipse cx="0" cy="0" rx="10" ry="7" fill="orange" transform="skewX(0)" />
                </g>
        </defs>
        <image id="bg" x="512" y="320" width="100%" height="100%" href="https://pic.imgdb.cn/item/670b84ddd29ded1a8cdbaddf.jpg"/>
        <g>
                <title id="tit">play</title>
                <image id="player" x="-100" y="-100" width="200" height="200" xlink:href="https://638183.freep.cn/638183/web/svg/light.svg" />
        </g>
        <use x="-230" y="-1" href="#light" />
        <use x="183" y="-170" href="#light" />
        <use x="305" y="-160" href="#light" />
        <use x="390" y="-155" href="#light" />
       
</svg>

<script>
mState = () => {
        tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        tit.textContent = aud.paused ? '点击播放' : '点击暂停';
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
bg.onanimationend = () => light.style.setProperty('opacity', '1');
</script>

朵拉 发表于 2024-10-13 19:50

@马黑黑
老师 晚上好，学生交作业，请指正哈{:4_190:}

马黑黑 发表于 2024-10-13 20:32

动作好快呀

梦油 发表于 2024-10-13 21:02

欣赏佳作，问候朵拉。

红影 发表于 2024-10-13 21:07

漂亮。欣赏朵宝好帖{:4_204:}

小辣椒 发表于 2024-10-13 21:49

朵拉晚上好，每次作业都是速度完成的{:4_199:}

梦江南 发表于 2024-10-14 09:50

欣赏老师音画佳作！{:4_199:}
页: [1]
查看完整版本: Пустота（学习马黑黑647号宇宙效果）