杨帆 发表于 2024-12-16 16:31

喜迎2025

本帖最后由 杨帆 于 2024-12-16 23:37 编辑 <br /><br /><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: -4.5%;top:39%;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></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 16:45

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

杨帆 发表于 2024-12-16 17:10

夕阳黄昏 发表于 2024-12-16 16:45


谢谢夕阳老师支持与鼓励，祝老师开心天天{:4_190:}

小辣椒 发表于 2024-12-16 20:07

问好杨帆，气氛很热烈哦{:4_199:}

小辣椒 发表于 2024-12-16 20:08

用了3个视频，我现在是电脑欣赏效果很完美

小辣椒 发表于 2024-12-16 20:09

这个播放器制作也是漂亮的，特别这字加的效果，是红影最喜欢用的{:4_205:}

小辣椒 发表于 2024-12-16 20:10

谢谢杨帆精彩分享，一起迎接2025的到来

朵拉 发表于 2024-12-16 21:09

欢乐喜庆的制作，好贴~~{:4_190:}

马黑黑 发表于 2024-12-16 21:32

喜庆氛围浓厚，好贴

冬天的雨 发表于 2024-12-16 22:26

欣赏，赞！

杨帆 发表于 2024-12-16 23:14

小辣椒 发表于 2024-12-16 20:10
谢谢杨帆精彩分享，一起迎接2025的到来

谢谢小辣椒鼓励与支持，一起迎接新年，共同畅想未来{:4_204:}

杨帆 发表于 2024-12-16 23:16

朵拉 发表于 2024-12-16 21:09
欢乐喜庆的制作，好贴~~

谢谢朵拉友友鼓励与支持，祝2025开心天天{:4_204:}

杨帆 发表于 2024-12-16 23:18

马黑黑 发表于 2024-12-16 21:32
喜庆氛围浓厚，好贴

得益于老师您的指导有方呦，谢谢老师临帖鼓励，祝福老师新年新气象{:4_191:}

杨帆 发表于 2024-12-16 23:19

冬天的雨 发表于 2024-12-16 22:26
欣赏，赞！

谢谢冬雨鼓励与支持，祝新年交大运，开心每一天{:4_191:}

杨帆 发表于 2024-12-16 23:24

小辣椒 发表于 2024-12-16 20:09
这个播放器制作也是漂亮的，特别这字加的效果，是红影最喜欢用的

真不晓得呢，影子也喜欢这种字加的效果？谢谢小辣椒{:4_204:}

马黑黑 发表于 2024-12-16 23:42

杨帆 发表于 2024-12-16 23:18
得益于老师您的指导有方呦，谢谢老师临帖鼓励，祝福老师新年新气象

同样祝你

杨帆 发表于 2024-12-16 23:56

马黑黑 发表于 2024-12-16 23:42
同样祝你

谢谢老师{:4_191:}

秋思梦景 发表于 2024-12-17 05:54

问候老师好！精美音画佳作，精心制作分享。为您点赞！{:5_116:}{:4_187:}

杨帆 发表于 2024-12-17 11:33

秋思梦景 发表于 2024-12-17 05:54
问候老师好！精美音画佳作，精心制作分享。为您点赞！

问好秋思梦景友友，谢谢鼓励与支持{:4_187:}

红影 发表于 2024-12-17 17:29

非常喜庆的作品，杨帆这个直接发代码的，不是上传了再发的，定位就完全没问题。
帖子的整个氛围非常好。给杨帆点赞{:4_199:}
页: [1] 2
查看完整版本: 喜迎2025