视频转场效果【椭圆】

亚伦影音工作室 发表于 2024-10-17 18:38

本帖最后由亚伦影音工作室于 2024-11-7 21:52 编辑 <br /><br /><style type="text/css">
#papa{
position: relative;
width: 1286px;
height: 720px;
   margin-left:-300px;
margin-top:10px;
border: 1px solid rgba(36, 201, 219,.95);
   border-radius: 2px;
background:#833;
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 3em 华文新魏;
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/449fc3e6586df8dedf6c21ae5ace3050_preview.mp4" loop muted autoplay=""></video>
<div id="testImg">
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/b87092b7c308d1cec141ef9f00b59015_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/320dc1b58114e235b4b3bb920ea82232_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/3714d95f76b9e6f74790ca1e4a931347_preview.mp4" loop muted autoplay=""></video>
</div>
<audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/7339-audiofreehighqps/84/72/GAqhav0KutpqACAAAAMPxOfi.m4a" 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="-100" rx="20" ry="50" fill="#fff"></ellipse>
<ellipse cx="0" cy="100" rx="20" ry="50" 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 = `作词：黄静美
作曲：黄静美
演唱：黄静美
编曲/混音：DJ Eva
和声/和声编写：谌宥
人声编辑：迟色
制作人：何文宇
制作统筹：谌宥/翊学长
宣发策划：吴晓强/旷丽萍
监制：熊磊/王腾飞
宣发：星云计划×一米星空
发行人：韦琪
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-17 18:42

欣赏老师又一力作，点赞！

亚伦影音工作室 发表于 2024-10-17 18:56

将代码的对应元素变换成
@keyframes round {0% {opacity: 1;clip-path:inset(0% 50% 0% 50%);
transform:translate(0%,0%)scale(1);}
3% {
opacity: 1;clip-path: inset(0 0 0 0);
transform:translate(0%,0%)scale(1);}
10% {
opacity: 1;clip-path: inset(0 0 0 0);
transform:translate(0%,0%)scale(1);}
23% {
opacity: 0;clip-path:inset(0 0 0 0);
transform:translate(0%,0%)scale(1);}
}

就能看到中分效果！

起个网名好难 发表于 2024-10-17 19:19

transform:translate(0%,0%)scale(1);多余的

亚伦影音工作室 发表于 2024-10-17 19:52

起个网名好难发表于 2024-10-17 19:19
transform:translate(0%,0%)scale(1);多余的

有时候用上，所以没有删除！

红影发表于 2024-10-17 20:07

漂亮的视频转场效果，这个才是正式作品啊。
欣赏亚伦老师好帖{:4_199:}

起个网名好难 发表于 2024-10-17 20:18

亚伦影音工作室发表于 2024-10-17 19:52
有时候用上，所以没有删除！

用上也不会有任何效果，一个不移，一个不变

小辣椒 发表于 2024-10-17 20:57

都是视频转换，欣赏亚伦精彩制作

页: [1]

花潮论坛's Archiver

视频转场效果【椭圆】