论坛 › 『唯美音画』 › 探索之光---纯音欣赏

宁静 发表于 2023-3-12 21:28

探索之光---纯音欣赏

<style>
#papa {
        margin: auto;
        width: 1216px;          
      height: 651px;
      left: -180px;
         top:150px;
        background: lightblue url('https://pic.imgdb.cn/item/640da7f0f144a01007493587.gif') center/cover no-repeat;
        box-shadow: 6px 3px 30px #000;
        position: relative;
        display: grid;
        place-items: center;
        z-index: 1;
}
#mplayer {
        width: 60px;
        height: 60px;
      top:65px;
        border-radius: 50%;
        background: lightblue;
        box-shadow: 5px 5px 30px black inset;
        cursor: pointer;
        animation: rot2d 8s infinite linear var(--state);
        position: absolute;
        transition: box-shadow .6s;
        --state: running;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        top: -50px;
        right: -50px;
        bottom: -50px;
        left: -50px;
        border: 6px dotted Yellow;
        border-radius: inherit;
        transform: perspective(1000px) rotateY(45deg) rotateX(15deg);
        animation: rot3d 10s infinite linear;
        --angle: 360deg;
}
#mplayer:hover {
        box-shadow: 5px 5px 60px Gold inset;
}
#mplayer::after {
        top: -60px;
        right: -60px;
        bottom: -60px;
        left: -60px;
        --angle: -1080deg;
}
#papa:fullscreen #mplayer {
        width: 100px;
        height: 100px;
}
#papa:fullscreen #mplayer::before {
        top: -70px;
        right: -70px;
        bottom: -70px;
        left: -70px;
}
#papa:fullscreen #mplayer::after {
        top: -80px;
        right: -80px;
        bottom: -80px;
        left: -80px;
}
@keyframes rot2d {
        to { transform: rotate(360deg); }
}
@keyframes rot3d {
        to { transform: perspective(1000px) rotateY(45deg) rotateX(15deg) rotateZ(var(--angle)); }
}
#dt1{ position: absolute; width: 600px; height: 450px; top:50px;; left: 280px; }
#dt2{ position: absolute; width: 409px; height: 170px; top:420px;; left: 100px; }
</style>

<div id="papa">

<img id="dt1" src="https://pic.imgdb.cn/item/622d9e335baa1a80ab334d7f.gif" alt="" />
<img id="dt2" src="https://pic.imgdb.cn/item/640da813f144a0100749712e.png" alt="" />

        <div id="mplayer"></div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=432430455" autoplay loop></audio>
</div>

<script src="../../api/fullscreen.js"></script>
<script>
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'pasued' : 'running');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
FS({pa: papa, set: 'color: snow; background: none; border: 2px solid snow; bottom: 20px;'});
</script>
<br><br><br><br><br><br><br>

宁静 发表于 2023-3-12 21:29

手机欣赏点击小圆球 --播放器 音乐出来

蜻蜓 发表于 2023-3-12 21:36

画面蛮美的，音乐动听{:10_402:}

恋恋风尘 发表于 2023-3-12 21:43

赞赞赞赞赞赞   {:10_402:}

墨羽 发表于 2023-3-12 21:50

哈哈，这音乐适合讲一个神秘的故事~！{:9005:}

点击神秘的魔法球……

{:9001:}

宁静 发表于 2023-3-12 21:59

蜻蜓 发表于 2023-3-12 21:36
画面蛮美的，音乐动听

蜻蜓，有人说这个洞有点怕的，不敢进去的{:9001:}

宁静 发表于 2023-3-12 22:00

本帖最后由 宁静 于 2023-3-12 22:02 编辑

恋恋风尘 发表于 2023-3-12 21:43
赞赞赞赞赞赞
谢谢小风支持，以后别加这么多花{:9007:}

宁静 发表于 2023-3-12 22:01

墨羽 发表于 2023-3-12 21:50
哈哈，这音乐适合讲一个神秘的故事~！

点击神秘的魔法球……


是哦，感觉整个画面有点恐惧感的，一对恋人走向阴森森的洞，好怕的{:9007:}

撒哈拉的雨 发表于 2023-3-12 22:09

宁静 发表于 2023-3-12 21:29
手机欣赏点击小圆球 --播放器 音乐出来



{:9022:}

音乐好听

{:9022:}

墨羽 发表于 2023-3-12 22:15

宁静 发表于 2023-3-12 22:01
是哦，感觉整个画面有点恐惧感的，一对恋人走向阴森森的洞，好怕的 ...

这是去探险嘛？手拿藏宝图{:9005:}

查看完整版本: 探索之光---纯音欣赏