绿叶清舟 发表于 2024-9-29 20:58

灯火里的中国


<style>
#tz { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201909%2F27%2F20190927124615_RTsvh.thumb.1000_0.png&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1729862860&t=4bf79f5faf6658c43fd9b38bf1977585') no-repeat 30px -80px / 512px 408px, url('https://p.upyun.com/demo/tmp/k1dJ69Ew.webp') no-repeat center/cover; box-shadow: 0 0 4px #111; z-index: 1; animation: bgmove 3s linear infinite alternate var(--state); position: relative; }
#player { position: absolute; right: 10px; bottom: 10px; cursor: pointer; filter: drop-shadow(2px 1px 4px #000); }
@keyframes bgmove { to { background-position: -10px -5px, center }; }
</style>

<div id="tz">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1837528900" autoplay loop></audio>
      <svg id="player" width="400" height="40" viewBox="-50 -5 100 10" style="">
                <g style="fill="none" stroke="#ef0216" stroke-width="10" stroke-dasharray="4" >
                        <line x1="-50" y1="0" x2="50" y2="0"></line>
                        <line x1="-50" y1="0" x2="50" y2="0" stroke="#edcc2c">
                              <animate attributeName="stroke-dashoffset" values="0;2;0;-2;0" dur="1.5s" repeatCount="indefinite"></animate>
                        </line>
                </g>
      </svg>
</div>

<script>
mState = () => aud.paused ? (tz.style.setProperty('--state', 'paused'), player.pauseAnimations()) : (tz.style.setProperty('--state', 'running'), player.unpauseAnimations());
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

绿叶清舟 发表于 2024-9-29 20:59

祝祖国繁荣昌盛，祝大家节日快乐

梦油 发表于 2024-9-29 21:31

祝清舟和朋友们国庆节快乐！

红影 发表于 2024-9-29 21:38

清舟的构思好，让红旗作为动态形式，学习了代码还为国庆送了份大礼{:4_199:}

红影 发表于 2024-9-29 21:39

灯火里的中国 青春婀娜
灯火里的中国 胸怀辽阔

祝福伟大的国生日快乐，永远繁荣昌盛{:4_177:}

绿叶清舟 发表于 2024-9-29 21:44

梦油 发表于 2024-9-29 21:31
祝清舟和朋友们国庆节快乐！

也祝梦油节日快乐

绿叶清舟 发表于 2024-9-29 21:44

红影 发表于 2024-9-29 21:38
清舟的构思好，让红旗作为动态形式，学习了代码还为国庆送了份大礼

正好国庆了就用这个了

红影 发表于 2024-9-29 23:03

绿叶清舟 发表于 2024-9-29 21:44
正好国庆了就用这个了

这个还是很好的，让红旗很有动感{:4_187:}

樵歌 发表于 2024-9-30 07:07

就佩服你们这些做音画图图的人，做个美贴跟吃饭喝水一样的快。{:4_187:}

樵歌 发表于 2024-9-30 07:08

祝福祖国繁荣昌盛！人民的获得感越来越强，贫穷的人越来越少。

起个网名好难 发表于 2024-9-30 08:07

https://img.soogif.com/uxp31PnQcDjrWOLOk9WJDHChVeOhYjlV.gif

梦江南 发表于 2024-9-30 08:11

欣赏老师音画佳作！问好！{:4_199:}

梦油 发表于 2024-9-30 14:19

绿叶清舟 发表于 2024-9-29 21:44
也祝梦油节日快乐

谢谢清舟朋友。让我们开心在一起，快乐在一起。

小九 发表于 2024-10-2 17:28

祝福大家国庆假日快乐！{:4_187:}{:4_199:}
页: [1]
查看完整版本: 灯火里的中国