论坛 › 欢乐水吧 › 卷轴尝试

亚伦影音工作室 发表于 2026-9-10 09:40

卷轴尝试

本帖最后由 亚伦影音工作室 于 2026-9-10 10:19 编辑 <br /><br /><style>
#mydiv {
    margin: 20px -320px;
      display: grid;
      place-items: center;
      width: 1186px;
      height: 640px;
      background: #eee url(https://mpimg.cn/view.php/b796f01349b1f8d415aa60568dc70ede.jpg)no-repeat center/100% 100%;
      user-select: none;
      overflow: hidden;
      position: relative;perspective: 2000px;
      z-index: 1;--state: running;
}
#vid {
    position: absolute;
    width: 100%;
    height: 100%;
top: 0%;
left: 0%;
    object-fit: cover;
    filter: invert(0%);
    mix-blend-mode: darken;
    opacity: 1;
   z-index: 16;
   
}
#box {width: 100%;position: absolute;top: 0px;left: -10%;z-index: 3;background:#000000 ;transform:rotate(180deg);
        height: 100%;-webkit-mask: url(https://pic1.imgdb.cn/i/034BIFIZsDBxOUaZeNNc11.png)no-repeat center/650px 380px;;animation: round 8s linear infinite var(--state);}

@keyframes round {

0% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%)rotateY(20deg)rotateX(-40deg);
opacity:1}
50% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%)rotateY(-20deg)rotateX(40deg);
opacity:1}
100%{
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0)scale(1)translate(0%,0%)rotateY(20deg)rotateX(-40deg);
opacity:1}

}
.slide {z-index: 4;place-items: center;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
opacity: 1;
}

.slide img {
position: absolute;
top: 15%;
left: 10%;
width: 100%;
height: 100%;

object-fit: cover;
display: block;
}


#overlay {
position: absolute;
top: -60px;
left: 0;
width: 100%;
height: calc(100% + 80px);
object-fit: cover;
mix-blend-mode: overlay;
opacity: 0.0;
z-index: 50;
pointer-events: none;
}

/* 添加模糊糊到清晰效果样式 */
.blur-to-clear-effect {
animation: blurToClear 1s ease-out forwards var(--state);
}

@keyframes blurToClear {
0% {
    filter: blur(8px);
    opacity: 0;
}
to {
    filter: blur(0);
    opacity: 1;
}
}

</style>

<div id="mydiv">
<video id="vid" src="https://www.panurl.cn/view.php/4b0d835d3f03500b6b582f4be195cde3.mp4" autoplay loop muted></video>
<div id="box">

<div class="slide">
    <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/02fedbbac83dda179428c3369e006e46.jpg" alt="图片1">
</div>
<div class="slide">
    <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/49b4f5138da37043e9b2651842d4dc6d.jpg" alt="图片2">
</div>
<div class="slide">
    <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/c0ec493df4c14731482abe16d8e69eac.png" alt="图片3">
</div>
<div class="slide">
    <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/d8479e15a051125823083f4d4d362b98.jpg" alt="图片4">
</div>
    <div class="slide">
      <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/7f2a8237ef017e2687f8f8ff2795b33d.jpg" alt="图片5">
      </div>
      <div class="slide">
      <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/e8546b5aaffb07791ed178d61e7cff7a.jpg" alt="图片6">
      </div>
</div>

<audio id="aud" src="http://music.163.com/song/media/outer/url?id=3369816768.mp3"loopautoplay ></audio>

</div>

<script>

mydiv.onclick = () => aud.paused ?aud.play(): aud.pause();
mState = () => {mydiv.style.setProperty('--state', aud.paused ?'paused' : 'running');
aud.paused ? (vid.pause()): (vid.play());
};
aud.onplaying = aud.onpause = () => mState();
</script>
<script>
let currentIndex = 0;
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;
let timer;

// 只保留模糊到清晰效果
const effects = [
{func: applyBlurToClearEffect}   
];

function init() {
const firstSlide = slides;
effects.func(firstSlide); // 始终使用第一个效果（模糊到清晰）
startTimer();
}

// 清除所有效果
function clearEffects() {
// 移除所有可能的效果类
slides.forEach(slide => {
    slide.style.opacity = '0';
    slide.classList.remove('blur-to-clear-effect');
});
}

function showNext() {if(!aud.paused){
clearEffects();
currentIndex = (currentIndex + 1) % totalSlides;
const currentEffect = effects; // 始终使用第一个效果（模糊到清晰）

const targetSlide = slides;
currentEffect.func(targetSlide);
resetTimer();
}
}

// 模糊到清晰效果
function applyBlurToClearEffect(slide) {
slide.style.opacity = '1';
slide.classList.add('blur-to-clear-effect');
}

function startTimer() {
timer = setInterval(showNext, 10800);
}

function resetTimer() {
clearInterval(timer);
startTimer();
}

window.onload = init;
</script>
https://video-qn.51miz.com/vcg/video/preview/51miz42N1204719829.mp4

杨帆 发表于 2026-9-10 11:52

制作漂亮，谢谢亚伦老师分享

查看完整版本: 卷轴尝试