论坛 › 音乐沙龙 › 邵容 - 铃兰

马黑黑 发表于 2024-1-21 13:21

邵容 - 铃兰

<style>
#mydiv {
        position: relative;
        margin: 0 0 0 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: url('https://638183.freep.cn/638183/t24/webp/lklj.webp') no-repeat center/cover;
        box-shadow: rgba(0,0,0,.6) 4px 6px 12px;
        overflow: hidden;
        z-index: 1;
}
#mydiv::before {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        background: url('https://638183.freep.cn/638183/t24/webp/llg.webp') no-repeat center/cover;
        clip-path: circle(0%);
        transition: 4s;
}
#mydiv:hover::before {
        clip-path: circle(100%);
}
#player {
        position: absolute;
        left: 20px;
        top: 20px;
        width: 120px;
        height: 120px;
        cursor: pointer;
        opacity: .45;
        animation: rot 6s infinite linear var(--state);
}
#vid {
        position: absolute;
        top: -60px;
        width: 100%;
        height: calc(100% + 60px);
        object-fit: cover;
        mix-blend-mode: screen;
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mydiv">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=289325" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/14/5e1bb9b3e6d93.mp4" loop></video>
        <img id="player" src="https://638183.freep.cn/638183/small/hxdo.png" alt="" title="播放/暂停" />
</div>

<script>
(function() {
        let mState = () => aud.paused ? (mydiv.style.setProperty('--state', 'paused'),vid.pause()) : (mydiv.style.setProperty('--state', 'running'),vid.play());
        aud.addEventListener('playing', mState, false);
        aud.addEventListener('pause', mState, false);
        mydiv.addEventListener('click', ()=> aud.paused ? aud.play() : aud.pause(),false);
})();
</script>

马黑黑 发表于 2024-1-21 13:21

代码
<style>
#mydiv {
    position: relative;
    margin: 0 0 0 calc(50% - 593px);
    width: 1024px;
    height: 640px;
    background: url('https://638183.freep.cn/638183/t24/webp/lklj.webp') no-repeat center/cover;
    box-shadow: rgba(0,0,0,.6) 4px 6px 12px;
    overflow: hidden;
    z-index: 1;
}
#mydiv::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background: url('https://638183.freep.cn/638183/t24/webp/llg.webp') no-repeat center/cover;
    clip-path: circle(0%);
    transition: 4s;
}
#mydiv:hover::before {
    clip-path: circle(100%);
}
#player {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 120px;
    height: 120px;
    cursor: pointer;
    opacity: .45;
    animation: rot 6s infinite linear var(--state);
}
#vid {
    position: absolute;
    top: -60px;
    width: 100%;
    height: calc(100% + 60px);
    object-fit: cover;
    mix-blend-mode: screen;
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mydiv">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=289325" autoplay loop></audio>
    <video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/14/5e1bb9b3e6d93.mp4" loop></video>
    <img id="player" src="https://638183.freep.cn/638183/small/hxdo.png" alt="" title="播放/暂停" />
</div>

<script>
(function() {
    let mState = () => aud.paused ? (mydiv.style.setProperty('--state', 'paused'),vid.pause()) : (mydiv.style.setProperty('--state', 'running'),vid.play());
    aud.addEventListener('playing', mState, false);
    aud.addEventListener('pause', mState, false);
    mydiv.addEventListener('click', ()=> aud.paused ? aud.play() : aud.pause(),false);
})();
</script>

小辣椒 发表于 2024-1-21 13:52

黑黑这个效果漂亮，还可以圆中变个美女出来{:4_170:}

小辣椒 发表于 2024-1-21 13:52

现在小辣椒惨了，估计套用都不会了

小辣椒 发表于 2024-1-21 13:53

先收藏，然后欣赏黑黑的精美制作{:4_178:}

醉美水芙蓉 发表于 2024-1-21 14:22

醉美水芙蓉 发表于 2024-1-21 14:23

马黑黑 发表于 2024-1-21 15:09

小辣椒 发表于 2024-1-21 13:52
黑黑这个效果漂亮，还可以圆中变个美女出来

想变就变{:4_170:}

马黑黑 发表于 2024-1-21 15:09

小辣椒 发表于 2024-1-21 13:52
现在小辣椒惨了，估计套用都不会了

为啥

马黑黑 发表于 2024-1-21 15:10

小辣椒 发表于 2024-1-21 13:53
先收藏，然后欣赏黑黑的精美制作

这个简单的

马黑黑 发表于 2024-1-21 15:10

醉美水芙蓉 发表于 2024-1-21 14:22
这个真美！谢谢老师分享！

{:4_190:}

马黑黑 发表于 2024-1-21 15:10

醉美水芙蓉 发表于 2024-1-21 14:23
有点flash的感觉了！

不会吧

起个网名好难 发表于 2024-1-21 16:02

https://s3.bmp.ovh/imgs/2023/05/24/d90e46c0779fdc6b.gif

以为美女会重复出现哪知仅出现几秒钟就再也没有了{:5_117:}

梦油 发表于 2024-1-21 16:52

黑黑先生出手不凡。{:5_116:}

亦是金 发表于 2024-1-21 17:12

起个网名好难 发表于 2024-1-21 16:02
以为美女会重复出现哪知仅出现几秒钟就再也没有了

将鼠标置于画面中，就能看美女管饱！{:4_189:}

亦是金 发表于 2024-1-21 17:16

好看的帖子，欣赏学习了，准备套用了！谢谢老师的代码!{:4_180:}

马黑黑 发表于 2024-1-21 17:23

亦是金 发表于 2024-1-21 17:16
好看的帖子，欣赏学习了，准备套用了！谢谢老师的代码!

{:4_191:}

马黑黑 发表于 2024-1-21 17:23

亦是金 发表于 2024-1-21 17:12
将鼠标置于画面中，就能看美女管饱！

{:4_172:}

马黑黑 发表于 2024-1-21 17:23

梦油 发表于 2024-1-21 16:52
黑黑先生出手不凡。

{:4_191:}

马黑黑 发表于 2024-1-21 17:24

起个网名好难 发表于 2024-1-21 16:02
以为美女会重复出现哪知仅出现几秒钟就再也没有了

一睹芳容的一大约暗示了多乎哉不多也的意思{:4_170:}

查看完整版本: 邵容 - 铃兰