小辣椒 发表于 2024-12-29 17:39

杏花落（Live 合唱版）歌手：胡蜜丹 TO：亚伦


<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 17:40

谢谢亚伦的代码，小辣椒套用玩一个@ 亚伦影音工作室

小辣椒 发表于 2024-12-29 17:40

@冬天的雨

冬雨你有时间手机测试一下播放器按钮

小辣椒 发表于 2024-12-29 17:43

完成了去吃饭了，晚上见了

樵歌 发表于 2024-12-29 18:20

听完再加分分，要不然中断兴致。我也是经常有易云上听这歌。你是带和声的，我在易云没找到。

樵歌 发表于 2024-12-29 18:21

等我那事完了这些都用来学唱{:4_189:}

起个网名好难 发表于 2024-12-29 18:41

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

冬天的雨 发表于 2024-12-29 18:55

小辣椒 发表于 2024-12-29 17:40
@冬天的雨

冬雨你有时间手机测试一下播放器按钮

手机欣赏效果完美，这个特效漂亮{:4_178:}

冬天的雨 发表于 2024-12-29 18:57

播放器按钮中间位置，手机点击方便一点，前面那个按钮手机看不见

梦油 发表于 2024-12-29 19:19

欣赏美帖，问候小辣椒。

红影 发表于 2024-12-29 21:08

亲爱的真快，这么快就是一个美帖呢。
制作漂亮，视频选用也漂亮。欣赏亲爱的好帖{:4_199:}

老谟深虑 发表于 2024-12-30 15:03

            制作的精美，歌曲好听！

绿叶清舟 发表于 2024-12-30 21:19

辣椒这个图图太有味道了，加上这视频更美了

梦江南 发表于 2024-12-31 08:25

水墨式的特效非常漂亮，歌好听，棒棒哒！{:4_187:}

小辣椒 发表于 2024-12-31 20:22

起个网名好难 发表于 2024-12-29 18:41


谢谢难难的欣赏和支持{:4_187:}

小辣椒 发表于 2024-12-31 20:23

樵歌 发表于 2024-12-29 18:20
听完再加分分，要不然中断兴致。我也是经常有易云上听这歌。你是带和声的，我在易云没找到。

樵哥哥这首歌你也是感觉好听？

小辣椒 发表于 2024-12-31 20:24

樵歌 发表于 2024-12-29 18:21
等我那事完了这些都用来学唱

慢慢来，我最近也是事情多，图图还是没有给你做的

小辣椒 发表于 2024-12-31 20:24

冬天的雨 发表于 2024-12-29 18:55
手机欣赏效果完美，这个特效漂亮
现成的旧图修改了一下

小辣椒 发表于 2024-12-31 20:25

冬天的雨 发表于 2024-12-29 18:57
播放器按钮中间位置，手机点击方便一点，前面那个按钮手机看不见

是的，手机一般播放器按钮在边上都看不见的

小辣椒 发表于 2024-12-31 20:26

梦油 发表于 2024-12-29 19:19
欣赏美帖，问候小辣椒。

问好梦油，谢谢欣赏{:4_187:}
页: [1] 2 3
查看完整版本: 杏花落（Live 合唱版）歌手：胡蜜丹 TO：亚伦