朵拉 发表于 2024-9-11 23:53

千与千寻（马黑黑原创）

<style>
#mydiv {
        --state: paused;
        margin: 30px 0 30px calc(50% - 593px);
        width: 1024px;
        height: 600px;
        background:
                url('https://gd-hbimg.huaban.com/0a3d5e6c24c937b53731d09eed0bc35b85c6931b1537b-xKIw7v') repeat 0 0/50% 50%,
                url('https://pic.imgdb.cn/item/66e1bc34d9c307b7e9786994.jpg') no-repeat center/cover,
                linear-gradient(to right top, #336699, #996633);
        background-blend-mode: overlay;
        border: thick double gray;
        display: grid;
        place-items: center;
        position: relative;
}
#player {
        position: absolute;
        animation: rot 8s linear infinite var(--state);
        cursor: pointer;
}
@keyframes rot {
        from { transform: rotate(0deg); filter: hue-rotate(0deg) drop-shadow(0 0 10px #000); }
        to { transform: rotate(360deg); filter: hue-rotate(360deg) drop-shadow(0 0 10px #000); }
}
</style>

<div id="mydiv">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1391726352" autoplay loop></audio>
        <img id="player" src="https://638183.freep.cn/638183/web/svg/hexagon.svg" alt="" />
</div>

<script>
var draggable = false, offset = 80, time_delay = 0;
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sc.charset = 'utf-8';
document.body.appendChild(sc);

sc.onload = () => FS({
        papa: '#mydiv',
        css: 'bottom: 20px; left: 50%; --fsBg: transparent; --color: #253d60;',
});

mState = () => {
        mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        player.title = '点击' + (aud.paused ? '播放' : '暂停');
};

aud.onpause = aud.onplaying = () => mState();

player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

朵拉 发表于 2024-9-11 23:53

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

醉美水芙蓉 发表于 2024-9-12 07:06

起个网名好难 发表于 2024-9-12 07:28

https://cccimg.com/view.php/e0894c0da7b69368594ef711c9a07755.webp

梦油 发表于 2024-9-12 09:24

欣赏佳作，问候朵拉。

梦江南 发表于 2024-9-12 09:52

欣赏老师佳作。问好！

红影 发表于 2024-9-12 10:04

这个svg图片的播放器好像用在什么地方都很好看呢。
欣赏朵宝好帖{:4_204:}

彩云归 发表于 2024-9-12 10:28

{:4_199:}谢谢分享！

樵歌 发表于 2024-9-12 12:58

满屏音符飞！{:4_199:}

世外桃源 发表于 2024-9-12 17:47

欣赏佳作 刚才分享
页: [1]
查看完整版本: 千与千寻（马黑黑原创）