视频衔接转场设计独家首创代码【测试中...】
本帖最后由 亚伦影音工作室 于 2024-10-17 14:47 编辑 <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:#333;
overflow: hidden;
}
.vid{width: 100%; height: 100%;
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:inset(0% 100% 0% 0%);
transform:translate(0%,0%)scale(1);}
8% {
opacity: 1;clip-path: inset(0 0 0 0);
transform:translate(0%,0%)scale(1);}
28% {
opacity: 0;clip-path:inset(0 0 0 0);
transform:translate(0%,0%)scale(1);}
}
.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 {}
</style >
<div id="papa" >
<div id="testImg">
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/736fdc82634c98f0146dc7492f29fa6a_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/8edf0b2173b58cc8c2eddb3de64f2070_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/e3f4791fe291e9adde6a61fcdf0bc824_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/c8f55c2fd779667044e56e02538c2002_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/c3e0dfe58d56efa1b3922cfa3de07e1f_preview.mp4" loop muted autoplay=""></video>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/ee/83/6f/aacdea43633faa23b196911990afada4/audio.mp3" 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>
<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() : aud.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>
因短视频时间不同所以尽量设置的时间列长一点！
根据爱好做出你喜欢的转场特效。
欣赏佳作，问候亚伦。 漂亮的图片轮播效果。
欣赏亚伦老师好帖{:4_199:} 欣赏佳作! 里面的人物好美，背景视频也漂亮{:4_199:} 现在亚伦玩纯视频了{:4_199:}
页:
[1]