约会阳光 发表于 2024-12-16 16:36

喜迎2025

<style>
#mama {
      margin: 130px 0 30px calc(50% - 780px);background: url('https://pic.imgdb.cn/item/65bba435871b83018a4e2002.jpg') no-repeat center/cover;width: 1400px;height: 780px; z-index: 1;overflow: hidden;position: relative;       
}
#vid1{
        position: absolute;width: 110%;height: 120%;left: -50px;top:-100px;opacity: .3; object-fit: cover;pointer-events: none;       
}
#vid2 { position: absolute; width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; opacity: 1;z-index: 2; }
#vid3{ position: absolute; width: 300px; height: 300px; left: 27%;top:38%; object-fit: cover; aspect-ratio: 1; border-radius: 50%;mix-blend-mode: screen ; }
   #vid4{
        position: absolute;width: 110%;height: 100%;left: -45px;top:38%;opacity: .9; object-fit: cover;pointer-events: none;-webkit-mask: radial-gradient(circle,silver,transparent,transparent);       
}
</style>
<div id="mama">
        <audioid="aud" src="https://music.163.com/song/media/outer/url?id=2151288796" autoplay loop></audio>       
        <video id="vid1"
src="https://img.tukuppt.com/video_show/2414777/00/02/23/5b5303d093761.mp4" autoplay loop muted></video>
        <video id="vid2" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/10/06/35/video6365c52bae37e.mp4" autoplay loop muted></video>
         <video id="vid3" src="https://img.tukuppt.com/video_show/2418175/00/08/42/5d2228836b4e9.mp4" loop muted oncontextmenu="return false"></video>
   <video id="vid4" src="https://img.tukuppt.com/video_show/2269348/00/14/15/5e1c05d86785e.mp4" autoplay loop muted ></video>
</div>
<script>
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/huakuai_yslrc.js';
document.body.appendChild(sf);
sf.onload = () => {
        HCPlayer({
                papa: '#mama',
                geci: geci,
                skip: 0,
                average: 0,
                player_css: 'left: 41%; bottom: 10px; --ww: 260px; --slider: #901889; --track: #f6d5f4; --prog: #a72fa1; --color: #901889',
                lrc_css: 'left:42.5%; bottom: 65px; --bg: url("https://pic.imgdb.cn/item/66caaf99d9c307b7e97df388.gif"); color: #fae5f9; font: bold 3.2em KaiTi;',
                fs_css: ' --bg: transparent; --color: #eee;left: 2%; bottom: 93.5%; ',
        });
};

var geci = `
       喜迎2025

`;
aud.oncanplay = aud.onplaying = aud.onpause = () => mama.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

容轩听雨 发表于 2024-12-16 22:22

元旦临近,应时之作,画面灵动,嵌入的视频喜庆。轻音乐旋律优美!赞,问好老师!

约会阳光 发表于 2024-12-16 22:55

容轩听雨 发表于 2024-12-16 22:22
元旦临近,应时之作,画面灵动,嵌入的视频喜庆。轻音乐旋律优美!赞,问好老师!

谢谢容轩听雨版主支持与鼓励,预祝2025快乐天天
页: [1]
查看完整版本: 喜迎2025