论坛 › 欢乐水吧 › 声声慢---（学习套用一个黑黑邵容 - 铃兰效果）

小辣椒 发表于 2024-1-31 15:08

声声慢---（学习套用一个黑黑邵容 - 铃兰效果）

<style>
#mydiv {
        position: relative;
        margin: 120px 0 0 calc(50% - 781px);
        width: 1400px;
        height: 711px;
        background: url('https://xlaj.cn/assets/file/zp/20240131145003.jpg') no-repeat center/cover;
        box-shadow: rgba(0,0,0,.6) 4px 6px 12px;
        overflow: hidden;
        z-index: 1;
}
#mydiv::before {
        position: absolute;
        content: '';
      left: -60px;
        top: 30px;
        width: 491px;
        height: 706px;
        background: url('https://xlaj.cn/assets/file/zp/20240131145046.png') no-repeat center/cover;
        clip-path: circle(0%);
        transition: 4s;
}
#mydiv:hover::before {
        clip-path: circle(100%);
}
#player {
        position: absolute;
        left: 690px;
        top: 350px;
        width: 120px;
        height: 120px;
        cursor: pointer;
        opacity: .45;
        animation: rot 6s infinite linear var(--state);
}
#vid {
        position: absolute;
        top: 220px;
                left: 0px;
        width: 25%;
        height: 25%;
        object-fit: cover;
        mix-blend-mode: screen;
}
@keyframes rot { to { transform: rotate(360deg); } }

#dt5{ position: absolute; width: 325px; height: 233px; top: 40px; left: 380px; }

</style>

<div id="mydiv">

        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=439139384" autoplay loop></audio>
        <video id="vid" src="https://lk999.oss-cn-guangzhou.aliyuncs.com/xxsx.mp4" autoplay="" loop="" muted="" bd_landing_video_statistic_record_key="1"></video>
        <img id="player" src="https://xlaj.cn/assets/file/zp/20240131145149.png" alt="" title="播放/暂停" />

<img id="dt5" src="https://xlaj.cn/assets/file/zp/20240131145127.gif " alt="" />

</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-31 15:10

小辣椒套用一个，反正现在都感觉很多根不上了。{:4_198:}

@马黑黑

小辣椒 发表于 2024-1-31 15:15

暂时离开一下。。。。。

红影 发表于 2024-1-31 15:24

这个鼠标触动的图图是小图，倒也很好看。欣赏亲爱的好帖{:4_199:}

红影 发表于 2024-1-31 15:29

小辣椒 发表于 2024-1-31 15:10
小辣椒套用一个，反正现在都感觉很多根不上了。

@马黑黑

亲爱的身体好点么？随心玩着就好，别累到啊{:4_179:}
刚病好就做帖子，太不容易了{:4_199:}

小辣椒 发表于 2024-1-31 16:20

红影 发表于 2024-1-31 15:29
亲爱的身体好点么？随心玩着就好，别累到啊
刚病好就做帖子，太不容易了

亲爱的，坐时间长感觉累，刚才去躺一下了

小辣椒 发表于 2024-1-31 16:26

我还是暂时不能去回帖，感觉累，先下了

清茶煮雪 发表于 2024-1-31 17:20

这个特效漂亮，空了学习一下{:4_204:}

清茶煮雪 发表于 2024-1-31 17:22

欣赏问好小辣椒{:4_187:}注意休息保重身体！

马黑黑 发表于 2024-1-31 18:09

小辣椒 发表于 2024-1-31 15:10
小辣椒套用一个，反正现在都感觉很多根不上了。

@马黑黑

漂亮{:4_190:}

亦是金 发表于 2024-1-31 19:21

问好小辣椒！帖子制作漂亮！欣赏学习了！注意身体别太累了！{:4_187:}

挑兮达兮 发表于 2024-1-31 20:11

漂亮{:4_204:}

醉美水芙蓉 发表于 2024-1-31 21:15

红影 发表于 2024-1-31 22:30

小辣椒 发表于 2024-1-31 16:20
亲爱的，坐时间长感觉累，刚才去躺一下了

说明身体还没全好，等养好了再来玩{:4_187:}

樵歌 发表于 2024-2-1 14:35

这小妮子就是不听话，刚好点就又跑来做帖子了，能多不将息几天，再做么，尽管做得很好，但还要要批评你{:4_349:}

小辣椒 发表于 2024-2-1 19:39

红影 发表于 2024-1-31 15:24
这个鼠标触动的图图是小图，倒也很好看。欣赏亲爱的好帖

亲爱的，套用黑黑代码玩一个

小辣椒 发表于 2024-2-1 19:40

菲儿 发表于 2024-1-31 17:20
这个特效漂亮，空了学习一下

问好菲儿，谢谢欣赏，一起玩一个{:4_171:}

小辣椒 发表于 2024-2-1 19:40

菲儿 发表于 2024-1-31 17:22
欣赏问好小辣椒注意休息保重身体！

谢谢菲儿关心{:4_179:}

小辣椒 发表于 2024-2-1 19:40

马黑黑 发表于 2024-1-31 18:09
漂亮

黑黑晚上好{:4_187:}

小辣椒 发表于 2024-2-1 19:42

亦是金 发表于 2024-1-31 19:21
问好小辣椒！帖子制作漂亮！欣赏学习了！注意身体别太累了！

谢谢前辈关心，小辣椒开始休息了，这次完全恢复是得有段时间的，现在就感觉人就好玩一下，不舒服就立马躺一下的

查看完整版本: 声声慢---（学习套用一个黑黑邵容 - 铃兰效果）