2025红火闹元宵
<style>#papa {
margin: 130px 0 30px calc(50% - 721px);
width: 1280px;
height: 750px;
background:#00FF00 url('') no-repeat center/cover;
background-blend-mode:darken;
pointer-events: none;
overflow: hidden;
display: grid;
place-items: center;
position: relative;
z-index:1;
}
#fullscreen { position: absolute; top:96%; right:2%;font: normal 1.8em/0em 华文隶书;color:Honeydew; opacity: 1; cursor: pointer;pointer-events: auto; z-index: 10}
#fullscreen:hover{ transform:scale(1.2,1.2);}
#player:hover{ transform:scale(1.3,1.3);}
#vid1 {
position: absolute;
left:-10px;
top:-120px;
width: 110%;
height:140%;
mix-blend-mode:screen; -webkit-mask: radial-gradient(transparent 20%, red);
opacity: 0.8;
object-fit: cover;
}
#vid2 {
position: absolute;
left:-140px;
top:-140px;
width: 150%;
height:150%;
mix-blend-mode:initial;
opacity: 1;
object-fit: cover;
}
#player {
position: absolute;
bottom:15px;
left:30px;
mix-blend-mode:screen;
width: 80px;
height: 80px;
cursor: pointer;
pointer-events: auto;
border-radius: 50%;
opacity: .98;z-index:10;
animation: rot 8s linear infinite var(--state);
}
@keyframes rot { to { transform: rotate(360deg); } }
#player:hover { filter: drop-shadow(0 0 80px Gold); }
.dancer{ position: absolute; width:70px;height:80px; z-index:1;}
.tit{
position: absolute;
object-fit: cover;
z-index:2;
top:30px;
width: 180%;
left: 95%;
background-image:url('https://pic.imgdb.cn/item/65a377bd871b83018ac3682a.gif');
background-size:cover;
filter: alpha(opacity=100,finishiopacity=0,style=1) shadow(color=#8C96B5,direction=135) glow(color=#B4BBCF,strength=5);
font: bold 2.8em 华文行楷;
font-weight:666;
text-align:left;
line-height:85px;
color:transparent;
pointer-events: auto;
-webkit-background-clip:text;
}
#marquee{
height: 150px;
overflow: hidden;
}
#marquee > div {
text-align: center;
animation: marquee 15s linear infinite var(--state);
}
#marquee:hover>div{
animation-play-state:paused;
}
#marquee p{
height: 30px;
margin: 0;
}
@keyframes marquee {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
</style>
<div id="papa" class="papa" >
<span id="fullscreen">全屏欣赏</span>
<video id="vid1" src="https://bpic.588ku.com/video_listen/588ku_video/24/11/11/18/13/05/video6731d8b109dda.mp4" autoplay loop muted></video>
<video id="vid2" src="https://cccimg.com/view.php/de01575c2ff7e1531832ab66658266ab.mp4" autoplay loop muted></video>
<audio id="aud" src="https://cccimg.com/view.php/2828e38dc503fcbec998a8466ad12395.mp3" autoplay loop></audio>
<img id="player" alt="" src="https://pic.imgdb.cn/item/67667ce4d0e0a243d4e7a530.webp" title="播放/暂停" />
<div id="marquee" >
<div class="tit">
<img class="dancer"src="https://xlaj.cn/upfile/202411/30/06.gif" alt=""> 幸福中国年，红火闹元宵，启航新征程，生活步步高！祝福论坛各位朋友元宵节快乐！<br></div>
</div></div>
<script>
const marquee = document.getElementById('marquee');
const contents =marquee.innerHTML;
marquee.innerHTML = contents + contents;
var mState = () => {
player.style.setProperty('--state', aud.paused ? 'paused' : 'running');
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running')
player.title = aud.paused ? '播放' : '暂停';
aud.paused ? (vid1.pause(),vid2.pause()) : (vid1.play(),vid2.play());
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
<script>
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
</script>
谢谢杨帆的美好祝福，这个帖子真喜庆啊{:4_187:} 祝杨帆和朋友们元宵节快乐！ 好酷的狮舞 红影 发表于 2025-2-11 21:06
谢谢杨帆的美好祝福，这个帖子真喜庆啊
今下午我刚看的表演，祝影子元宵节快乐{:4_204:} 梦油 发表于 2025-2-11 21:20
祝杨帆和朋友们元宵节快乐！
谢谢梦油超版支持与祝福，同祝朋友元宵节快乐{:4_176:} https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 马黑黑 发表于 2025-2-11 21:29
好酷的狮舞
是啊，冒着大雪表演，感动！高手在民间啊，祝马老师元宵节快乐{:4_176:} 起个网名好难 发表于 2025-2-11 22:07
谢谢难难老师鼓励，祝老师元宵节快乐{:4_176:} 杨帆 发表于 2025-2-11 22:04
今下午我刚看的表演，祝影子元宵节快乐
非常欢乐，拍得真好{:4_187:} 杨帆 发表于 2025-2-11 22:07
是啊，冒着大雪表演，感动！高手在民间啊，祝马老师元宵节快乐
一同快乐 我手机里是绿幕与gif，看不见舞狮或视频等，遗憾。 深秋红枫 发表于 2025-2-11 23:21
我手机里是绿幕与gif，看不见舞狮或视频等，遗憾。
那是什么原因呢，电脑看正常呀 不知是咋的，我看到的是绿色的屏幕。 杨帆 发表于 2025-2-11 22:05
谢谢梦油超版支持与祝福，同祝朋友元宵节快乐
谢谢你的美好祝福。
页:
[1]