小辣椒 发表于 2024-12-29 20:27

杏花落（Live 合唱版）-胡蜜丹


<style>
#papa { margin: 150px 0 20px calc(50% - 781px); background:#800 url('https://xlaj.cn/upfile/202412/28/xhl.jpg')no-repeat center/cover;width: 1400px; height: 750px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; }
#tz { top:42%; left:15%;width: 840px; height: 300px; border: 0px solid gray; position: absolute;z-index:10;}
#tz::before { content: attr(data-lrc); position: absolute; bottom: 0;margin: 0px 38px;width: 100%; height: 60px; text-align: center; font: 600 2.0em/1em 微软雅黑; color:#880000;font-style:italic; filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0); }
#vid {z-index: 2;position: absolute;width: 100%;height: 100%; top:-10%;object-fit: cover;mix-blend-mode: lighten;}

#mypic {top:96%; left:0%;z-index: 4;
position: absolute;
    width:1286px; height: 3px;
    background:linear-gradient(90deg,transparent, #ff0000, #00ff80,#fff000, #00ff80, #ff0000,transparent)no-repeat center/100%;
animation: heart-burst.8s infinite;}
@keyframes heart-burst {0% {transform:translate(0%,0%)scale(0, 1);filter:hue-rotate(0deg)contrast(100%)brightness(100%);}
100% {transform:translate(0%,0%)scale(1);filter:hue-rotate(360deg)contrast(180%)brightness(300%);}}
#but{left: 46%;top: 86%;width: 50px; height: 50px;position:absolute; border: 5px solid #800000;z-index: 40;
             border-radius: 50%;}
#cndpt{    position: absolute;width: 30px; height: 30px;
background:#800000;left: 56%;
top: 50%;transform: translate(-50%, -50%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);}
#enopg{ position: absolute;width: 30px; height: 30px;
display: none; background:#800000;left: 62%;
top: 50%;
transform: translate(-50%, -50%);
   clip-path: polygon(75% 50%, 0 0, 0 100%)
}
</style>
<div id="papa">
<div id="tz" data-lrc="杏花落（Live 合唱版）-胡蜜丹"> </div>
<div id="but" >
<div id="cndpt"></div>
<div id="enopg" ></div>
</div>
<div id="mypic" ></div>
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/17/43/5ec47a9914ee7.mp4" autoplay loop muted></video>
</div>
<audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/590b-audiofreehighqps/12/CA/GKwRIasLG542ACAAAAM2UhPW.m4a" autoplay loop></audio>
<script>
var curkey = 0, lrcAr = [];
var getAr = (text) => {
    var ar = text.trim().split('\n');
    ar.sort();
    var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
    ar.forEach(item => {
      let result = item.match(reg);
      let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
      lrcAr.push(.trim()]);
    });
};
aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
    if(curkey > lrcAr.length - 1) return;
    if(aud.currentTime >= lrcAr) {
      tz.dataset.lrc = lrcAr;
      curkey ++;
    }
};
var lrc = `杏花落（Live 合唱版）-胡蜜丹
词：崔伟立
曲：崔伟立
录音：袁涛
编曲：冯丹
笛子：丁晓逵
伴唱：凌菲
混音：苏洲
制作人：冯丹
监制：鑫明
古筝：丁雪儿   
天边那片洁白的云朵
在我身边轻轻地飘过
你像三月暖暖的春风
融化冰冻的小河
你的手我紧紧地牵着
多少风雨也不曾闪躲
真心真意浇灌的花朵
开出万紫千红的颜色
漫天飘飘洒洒的杏花落
温暖了心窝
每当听你唱甜蜜的情歌
眼泪就一颗颗
漫天飘飘洒洒的杏花落
唯美了承诺
陪你走过一生的坎坷
让那爱情开出幸福的果
。。。。。。
天边那片洁白的云朵
在我身边轻轻地飘过
你像三月暖暖的春风
融化冰冻的小河
你的手我紧紧地牵着
多少风雨也不曾闪躲
真心真意浇灌的花朵
开出万紫千红的颜色
漫天飘飘洒洒的杏花落
温暖了心窝
每当听你唱甜蜜的情歌
眼泪就一颗颗
漫天飘飘洒洒的杏花落
唯美了承诺
陪你走过一生的坎坷
让那爱情开出幸福的果
漫天飘飘洒洒的杏花落
温暖了心窝
每当听你唱甜蜜的情歌
眼泪就一颗颗
漫天飘飘洒洒的杏花落
唯美了承诺
陪你走过一生的坎坷
让那爱情开出幸福的果
让那爱情开出幸福的果
谢谢欣赏


`;
getAr(lrc);
</script>
<script>

aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());


but.onclick = () => aud.paused ? (aud.play(),enopg.style.display = 'none',cndpt.style.display = 'block',vid.play()) : (aud.pause(),enopg.style.display = 'block',cndpt.style.display = 'none',vid.pause());

mypic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mypic.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mypic.style.animationPlayState = 'paused');   

</script>

小辣椒 发表于 2024-12-29 20:28

同一首完成

liumang 发表于 2024-12-30 21:33

查点漏了，小辣椒这个特效加的漂亮

liumang 发表于 2024-12-30 21:33

背景图做的也是漂亮
页: [1]
查看完整版本: 杏花落（Live 合唱版）-胡蜜丹