论坛 › 欢乐水吧 › 3D切换【初稿】

亚伦影音工作室 发表于 2026-9-2 22:47

3D切换【初稿】

本帖最后由 亚伦影音工作室 于 2026-9-2 22:51 编辑 <br /><br /><style>
#mydiv {
    margin: 0px -300px;
      display: grid;
      place-items: center;
      width: 1186px;
      height: 640px;
      background-color: #800000;
      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;
    pointer-events: none;
    mix-blend-mode: screen;
    mask: linear-gradient(to top right, red 100%, transparent 0);
   z-index: 6;
    opacity: .9;
}

.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
}

.slide img {
position: absolute;
top: 0;
left: 0;
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 {
from {transform: rotate3d(0, 0, 0,0deg);
    filter: blur(0px);
    opacity: 0;
}
to {transform: rotate3d(0, 1, 0,-180deg);
    filter: blur(0);
    opacity: 1;
}
}

</style>

<div id="mydiv">
<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/0b04551c7ce54a3575277d93c0885dfc_preview.mp4" autoplay loop muted></video>
<div class="slide">
    <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/7f2a8237ef017e2687f8f8ff2795b33d.jpg" alt="图片1">
</div>
<div class="slide">
    <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/c3d56a62b1e7ae883cf0b26fbd35ba5e.jpg" alt="图片2">
</div>
<div class="slide">
    <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/e9bacf62c6300a8dd2553adee41c1201.jpg" alt="图片3">
</div>
<div class="slide">
    <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/5ecd9bf72e90082400fb4fa87c91ba5f.jpg" alt="图片4">
</div>
    <div class="slide">
      <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/9d79fb1d6f51c9e42a547fed2b492db1.jpg" alt="图片5">
      </div>
      <div class="slide">
      <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/5d6b416831d6aff1ce1eeba1ddcc6a7d.jpeg" alt="图片6">
      </div>
<audio id="aud" src="https://www.qeecc.com/plug/down.php?ac=music&lk=mp3&id=eXl4Y3l3c2lp"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, 5000);
}

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

window.onload = init;
</script>

小辣椒 发表于 2026-9-2 22:56

欣赏亚纶的3D切换【初稿】 ，期待正稿{:4_187:}

查看完整版本: 3D切换【初稿】