朵拉 发表于 2024-9-25 20:28

阑珊处（马黑黑原创）

本帖最后由 朵拉 于 2024-9-25 20:30 编辑 <br /><br /><style>
#tz { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://pic.imgdb.cn/item/666ef370d9c307b7e9ba14b6.gif') no-repeat 0 0 / 412px 308px, url('https://pic.imgdb.cn/item/66f3f5abf21886ccc0ec7b45.jpg') 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=2622830743" autoplay loop></audio>
      <svg id="player" width="400" height="40" viewBox="-50 -5 100 10" style="">
                <g style="fill="none" stroke="orange" 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="brown">
                              <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-25 20:31

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

红影 发表于 2024-9-25 21:14

小播配色漂亮。蝴蝶用静图比较好，用动图暂停时看不出呢。
欣赏朵宝好帖{:4_204:}

梦油 发表于 2024-9-25 21:24

欣赏佳作，问候朵拉。

小辣椒 发表于 2024-9-25 21:43

朵拉速度的，这么快就出来了{:4_199:}

小辣椒 发表于 2024-9-25 21:46

黑黑这个播放器和上面的图是有联动效果的，还有朵拉要把蝴蝶的动图尺寸改一下，现在是黑黑的图片尺寸，偏大了

小辣椒 发表于 2024-9-25 21:47

蝴蝶动图尺寸是204X160

走过岁月 发表于 2024-9-26 00:25

欣赏朵拉的好作品
页: [1]
查看完整版本: 阑珊处（马黑黑原创）