苹果香（合唱Live 版）,单图音画,纳兰音画网,音画设计分享诗词朗诵音乐欣赏播放器设计论坛 - Bbs.CnzV.cC - Powered by Discuz! Archiver

论坛首页 › 单图音画 › 苹果香（合唱Live 版）

醉美水芙蓉 发表于 2024-10-17 22:04:06

苹果香（合唱Live 版）

<style type="text/css">
#papa{
position: relative;
width: 1286px;
height: 720px;
   margin-left:-200px;
margin-top:10px;
border: 1px solid rgba(36, 201, 219,.95);
   border-radius: 2px;
background:#F7F709;
overflow: hidden;
}
#vid1{width: 100%; height: 100%;z-index: 1;
position:absolute;
top:0%; left:0%;
object-fit: cover; pointer-events: none;
}
.vid{width: 100%; height: 100%;z-index: 2;
position:absolute;
top:0%; left:0%;

opacity: 0;object-fit: cover; pointer-events: none;
animation: round 50s linear infinite;}
@keyframes round{
0% {
opacity: 1;clip-path: ellipse(0% 00% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1)
}

2% {
opacity: 1;clip-path:ellipse(1% 1% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1)
}
6% {
opacity: 1;clip-path: ellipse(50% 50% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);
}

8% {clip-path: ellipse(100% 100% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);
opacity: 1;}

10% {clip-path: ellipse(100% 100% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);
opacity: 1;}
23% {clip-path: ellipse(100% 100% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);
opacity: 0;}
}

.vid:nth-child(1){animation-delay: 40s;}
.vid:nth-child(2){animation-delay: 30s;}
.vid:nth-child(3){animation-delay: 20s;}
.vid:nth-child(4) {animation-delay: 10s;}
.vid:nth-child(5) {animation-delay: 0s;}

.stop .vid:nth-child(1),
.stop .vid:nth-child(2),
.stop .vid:nth-child(3),
.stop .vid:nth-child(4),
.stop .vid:nth-child(5){animation-play-state: paused;}

#mdiv {top:12%; left:5%;cursor: pointer;
width:200px;text-align:center;animation:rot 10s linear infinite;
position: absolute;filter:drop-shadow(#000 0px 0 1px);
z-index: 40;
}
@keyframes rot { to { transform: rotate(2turn);} }
#mdiv:hover {}
#lrc {
   --state: paused;
   --motion: cover2;
   --tt: 2s;
   --bg: #880000;
   position: absolute;z-index: 6;
   left: 50%;
   transform: translate(-50%);
   top: 86%;
   font:normal 2.5em 华文新魏;
color: #000;

   -webkit-background-clip: text;
   filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
   position: absolute;
   content: attr(data-lrc);
   width: 20%;
   height: 100%;
   color: transparent;
   overflow: hidden;
   white-space: pre;
   background: var(--bg);
-webkit-background-clip: text;
   animation: var(--motion) var(--tt) linear forwards;
   animation-play-state: var(--state);
}
@keyframes cover1{0% { width: 0%;}100% { width: 100%;}}
@keyframes cover2 { 0% { width: 0%;}100% { width: 100%;}}
</style >
<div id="papa" >
<video id="vid1" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/8b89f002c46922dec9b9ec1f98318ad8_preview.mp4" loop muted autoplay=""></video>
<div id="testImg">
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/646fff0399525c6e4d6454a5e7302eec_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/fs/scene/preview_video/dcee618d46e1582b0bacf9a8cbaa2a1e_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/ddd59619b3ada751400731db8cce5368_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/1df1e957e91bbbbf3f876243d3db293f_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/b87092b7c308d1cec141ef9f00b59015_preview.mp4" loop muted autoplay=""></video>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2623813691" autoplay loop></audio>
<div id="mdiv">
<svg width="100" height="100" viewBox="-160 -160 320 320">
<defs>
<filter id="shadow">
<feDropShadow dx="0" dy="0" stdDeviation="1" flood-color="black"></feDropShadow>
</filter>
<g id="part" filter="url(#shadow)">
<line x1="0" y1="-100" x2="0" y2="100" stroke="#880" stroke-width="4"></line>
<ellipse cx="0" cy="-125" rx="20" ry="20" fill="#fff"></ellipse>
<ellipse cx="0" cy="125" rx="20" ry="20" fill="#fff"></ellipse>
</g>
</defs>
<use href="#part"></use>
<use href="#part" transform="rotate(35)"></use>
<use href="#part" transform="rotate(70)"></use>
<use href="#part" transform="rotate(105)"></use>
<use href="#part" transform="rotate(140)"></use>
</svg>
</div>
<div data-lrc="视频椭圆转场效果" id="lrc">视频椭圆转场效果</div>
</div>

<script>
(function() {
   const vids = document.querySelectorAll('.vid');
   var mState = () => {
      vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
   };
   aud.onplaying = aud.onpause = () => mState();
   })();

mdiv.onclick = () => aud.paused ? (aud.play(),vid1.play() ): (aud.pause(),vid1.pause());
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');

var image = document.getElementById("testImg");
let mState = () => aud.paused ? image.classList.add('stop'):image.classList.remove('stop');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `苹果香（合唱Live 版）
作词：狼戈
作曲：狼戈
原唱：狼戈
LRC编辑：醉美水芙蓉
红嘴雁啊飞回芦苇随风摆
河对面的莎吾烈泰今天在不在
那年我饮马来到了你的白毡房
我曾看到你弹着冬布拉听过你把歌唱
单纯的相逢平凡的晚上
我就在那个时候啊傻傻的等到了天亮
月亮作证你毡帽上的羽毛
亲吻着晚风飘啊飘啊飘到了我的心上
六星街里还传来巴扬琴声吗
阿力克桑德的面包房列巴出炉了吗
南苑卤香是舌尖上的故事啊
你让浪迹天涯的孩子啊梦中回家吧
儿时的万花筒里有野鸽在飞翔
这让我想起二哥和他心爱的弹弓叉
湖蓝色的院墙我生命里的院落
我的妈妈在那里给我的爱叫我永生不忘啊
心中有个地方刻进了你的名字
草原河谷月季花香都是我的歌
儿时离开你正逢花开时
如今往事远了模糊了我却忘不了苹果香
如今往事远了模糊了我却忘不了苹果香
谢谢欣赏！`;

/*变量：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
   let tmpAr = [];
   for(j = 0; j <ar.length - 1; j ++) {
            if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
   }
   let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
   tmpAr.push(aver);
   tmpAr.forEach((item,key) => {
            ar = item > aver ? aver : item;
   });
   return ar;
};

/*函数：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
   let lrcAr = [];
   let calcRule = ;
   for(x of text.split('\n')) {
            let ar = [];
            let re = /\d+[\.:]\d+([\.:]\d+)?/g;
            let geci = x.replace(re,'');
            if(geci) {
                     geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                     let time = x.match(re);
                     if(time != null) {
                           for(y of time) {
                                    let tmp = y.match(/\d+/g);
                                    let sec = 0;
                                    for(z in tmp) sec += tmp * calcRule;
                                    ar = ;
                                    lrcAr.push(ar);
                           }
                     }
            }
   }
   lrcAr.sort((a,b)=> a - b);
   return(lrcTime(lrcAr));
};

/*函数：模拟显示同步歌词*/
let showLrc = (time) => {
   let name = mFlag ? 'cover1' : 'cover2';
   lrc.innerHTML = lrcAr;
   lrc.dataset.lrc = lrcAr;
   lrc.style.setProperty('--motion', name);
   lrc.style.setProperty('--tt', time + 's');
   lrc.style.setProperty('--state', 'running');
   mKey += 1;
   mFlag = !mFlag;
};

/*函数：处理当前歌词索引 mKey*/
let calcKey = () => {
   for (j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime <= lrcAr) {
                     mKey = j - 1;
                     break;
            }
   }
   if (mKey < 0) mKey = 0;
   if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
   let time = lrcAr - (aud.currentTime - lrcAr);
   showLrc(time);
};

/*格式化时间信息*/
let toMin = (val) => {
   if (!val) return '00:00';
   val = Math.floor(val);
   let min = parseInt(val / 60),
   sec = parseFloat(val % 60);
   if (min < 10) min = '0' + min;
   if (sec < 10) sec = '0' + sec;
   return min + ':' + sec;
}

/*函数：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused')) : (lrc.style.setProperty('--state','running'));

/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
   for (j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime >= lrcAr) {
                     cKey = j;
                     if (mKey === j) showLrc(lrcAr);
                     else continue;
            }
   }
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script>

翁奕童苑 发表于 2024-10-28 17:21:29

这个作品漂亮！！！！

1643091610 发表于 2024-11-3 17:51:30

这个作品漂亮！！！！

翁奕童苑 发表于 2024-11-16 11:35:58

这个作品漂亮！！！！

翁奕童苑 发表于 2024-11-24 13:36:30

这个作品漂亮！！！！

红尘过客 发表于 2024-12-21 20:20:33

支持，赞

页: [1]

查看完整版本: 苹果香（合唱Live 版）