云端漫步 发表于 4 天前

【漫步特效】苍兰诀TO 汐云渡 （十一种CSS动画）

<style>
#mydiv {
        margin: 150px 0 30px calc(50% - 800px);
        display: grid;
        place-items: center;
        width: 1700px;
        height: 850px;
        background-color: #a8e4cc;
        box-shadow: 3px 3px 20px #000;
        user-select: none;
        overflow: hidden;
        position: relative;
        z-index: 1;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transform: translate(0, 0);
}

.slide img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

#effects {
position: absolute;
bottom: 30px;
left: 0;
right: 0;
text-align: center;
z-index: 100;
padding: 10px;
background: transparent;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

#effects button {
padding: 6px 12px;
margin: 5px;
background: rgba(0,0,0,0.6);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s;
}

#effects button.active {
background: white;
color: black;
}

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

.blinds-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
display: flex;
}

.blind-slider {
flex: 1;
height: 100%;
background-color: #a8e4cc;
transition: transform 1.5s ease;
transform: translateY(0);
}

#vid1 {
position: absolute;
width: 100%;
height: 110%;
top:-80px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 2;
opacity: .15;
}
#vid2 {
position: absolute;
width: 100%;
height: 110%;
top:-80px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
-webkit-mask: linear-gradient(to bottom, red 50%, transparent 55%, transparent);
z-index: 3;
opacity: .20;
}
</style>   
<div id="mydiv">

<div class="slide" style="opacity: 1;">
    <img src="https://www.yhyhlt.com/data/attachment/forum/202606/20/214749l598y88i8e3y7ir6.jpg" alt="图片1">
</div>
<div class="slide">
    <img src="https://www.yhyhlt.com/data/attachment/forum/202606/20/214749jzzismbssjytjr3y.jpg" alt="图片2">
</div>
<div class="slide">
    <img src="https://www.yhyhlt.com/data/attachment/forum/202606/20/214750kavao4ikodlkv2y4.jpg" alt="图片3">
</div>
<div class="slide">
    <img src="https://www.yhyhlt.com/data/attachment/forum/202606/20/214754olnlu0nsiviext6s.jpg" alt="图片4">
</div>

<video id="overlay" autoplay loop muted playsinline>
    <source src="https://img2.tukuppt.com/video_show/15653652/01/06/15/615cf6769bff8.mp4" type="video/mp4">
</video>

<video id="vid1" src="https://img2.tukuppt.com/video_show/2405811/00/73/42/6095e864e212a.mp4" autoplay loop muted></video>
<video id="vid2" src="" autoplay loop muted></video>

<div id="effects">
    <button data-effect="fade" class="active">淡入淡出</button>
    <button data-effect="slideLeft">左滑入</button>
    <button data-effect="slideRight">右滑入</button>
    <button data-effect="slideTop">上滑入</button>
    <button data-effect="slideBottom">下滑入</button>
    <button data-effect="zoom">缩放</button>
    <button data-effect="rotate">旋转</button>
    <button data-effect="fade-zoom">淡入缩放</button>
    <button data-effect="swing">摇摆进入</button>
    <button data-effect="blinds">百叶窗</button>
    <button data-effect="random">随机</button>
</div>
</div>
<audio id="aud" src="https://mp3.joy127.com/music/12896.mp3" autoplay loop></audio>

<script>
let currentIndex = 0;
let slides = document.querySelectorAll('.slide');
let totalSlides = slides.length;
let timer;
let currentEffect = 'fade';
const effects = ['fade', 'slideLeft', 'slideRight', 'slideTop', 'slideBottom', 'zoom', 'rotate', 'fade-zoom', 'swing', 'blinds', 'random'];

function init() {

document.querySelectorAll('#effects button').forEach(btn => {
    btn.addEventListener('click', function() {
      document.querySelectorAll('#effects button').forEach(b => b.classList.remove('active'));
      this.classList.add('active');
      currentEffect = this.dataset.effect;
      showNext();
    });
});

autoPlayAudio();

startTimer();
}

function autoPlayAudio() {
const audio = document.getElementById('aud');

audio.play().then(() => {
    console.log('音乐播放成功');
}).catch(e => {
    document.body.addEventListener('click', function playOnClick() {
      audio.play();
      document.body.removeEventListener('click', playOnClick);
    }, { once: true });
});
}
function clearEffects() {
const blinds = document.querySelector('.blinds-wrapper');
if (blinds) blinds.remove();
slides.forEach(slide => {
    slide.style.opacity = '0';
    slide.style.transform = 'translate(0, 0) scale(1) rotate(0)';
    slide.style.transition = 'none';
});
}
function showNext() {
clearEffects();

currentIndex = (currentIndex + 1) % totalSlides;

let effect = currentEffect === 'random'
    ? effects
    : currentEffect;

const slide = slides;

applyEffect(slide, effect);

resetTimer();
}

function applyEffect(slide, effect) {

slide.style.display = 'block';

switch(effect) {
    case 'fade':
      slide.style.opacity = '0';
      setTimeout(() => {
      slide.style.transition = 'opacity 2s';
      slide.style.opacity = '1';
      }, 50);
      break;
      
    case 'slideLeft':
      slide.style.transform = 'translateX(-100%)';
      slide.style.opacity = '1';
      setTimeout(() => {
      slide.style.transition = 'transform 1.5s ease-out';
      slide.style.transform = 'translateX(0)';
      }, 50);
      break;
      
    case 'slideRight':

      slide.style.transform = 'translateX(100%)';
      slide.style.opacity = '1';
      setTimeout(() => {
      slide.style.transition = 'transform 1.5s ease-out';
      slide.style.transform = 'translateX(0)';
      }, 50);
      break;
      
    case 'slideTop':

      slide.style.transform = 'translateY(-100%)';
      slide.style.opacity = '1';
      setTimeout(() => {
      slide.style.transition = 'transform 1.5s ease-out';
      slide.style.transform = 'translateY(0)';
      }, 50);
      break;
      
    case 'slideBottom':

      slide.style.transform = 'translateY(100%)';
      slide.style.opacity = '1';
      setTimeout(() => {
      slide.style.transition = 'transform 1.5s ease-out';
      slide.style.transform = 'translateY(0)';
      }, 50);
      break;
      
    case 'zoom':
      slide.style.transform = 'scale(0.5)';
      slide.style.opacity = '0';
      setTimeout(() => {
      slide.style.transition = 'transform 2s, opacity 2s';
      slide.style.transform = 'scale(1)';
      slide.style.opacity = '1';
      }, 50);
      break;
      
    case 'rotate':
      slide.style.transform = 'rotate(-15deg) scale(0.8)';
      slide.style.opacity = '0';
      setTimeout(() => {
      slide.style.transition = 'transform 2s, opacity 2s';
      slide.style.transform = 'rotate(0) scale(1)';
      slide.style.opacity = '1';
      }, 50);
      break;
      
    case 'fade-zoom':
      slide.style.transform = 'scale(0.8)';
      slide.style.opacity = '0';
      setTimeout(() => {
      slide.style.transition = 'transform 2s, opacity 2s';
      slide.style.transform = 'scale(1)';
      slide.style.opacity = '1';
      }, 50);
      break;
      
    case 'swing':
      slide.style.transform = 'rotate(-10deg) translateX(-50%)';
      slide.style.opacity = '0';
      setTimeout(() => {
      slide.style.transition = 'transform 2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 2s';
      slide.style.transform = 'rotate(0) translateX(0)';
      slide.style.opacity = '1';
      }, 50);
      break;
      
    case 'blinds':

      slide.style.opacity = '1';

      const wrapper = document.createElement('div');
      wrapper.className = 'blinds-wrapper';
      slide.appendChild(wrapper);

      const sliderCount = 8;
      for(let i = 0; i < sliderCount; i++) {
      const slider = document.createElement('div');
      slider.className = 'blind-slider';
      slider.style.transitionDelay = `${i * 0.1}s`;
      wrapper.appendChild(slider);
      }

      setTimeout(() => {
      const sliders = wrapper.querySelectorAll('.blind-slider');
      sliders.forEach(slider => {
          slider.style.transform = 'translateY(-100%)';
      });
      }, 100);
      break;
}
}

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

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

window.onload = init;
</script>

云端漫步 发表于 4 天前

本帖最后由 云端漫步 于 2026-6-20 21:57 编辑

@汐云渡 @姚云裳

云端漫步 发表于 4 天前

在画底部点看十一种CSS动画

花茶（永） 发表于 4 天前

代码高手!{:7_194:}

醉美水芙蓉 发表于 4 天前

又见漫步老师精彩特效！真漂亮！

云端漫步 发表于 4 天前

花茶（永） 发表于 2026-6-20 16:25
代码高手!

感谢这么走心的赞美！你的欣赏是最好的鼓励，温暖又治愈，万分感恩！
让我们同享音画的乐趣！六月初临景夏天，端午安康暖万家！

云端漫步 发表于 4 天前

醉美水芙蓉 发表于 2026-6-20 16:47
又见漫步老师精彩特效！真漂亮！

芙蓉周未快乐乐端午快乐！

念若莲 发表于 4 天前

十一幅图，十一种动画，点随机看全部展示。

念若莲 发表于 4 天前

制作精美，看大片的感觉。欣赏漫步老师的精彩。

念若莲 发表于 4 天前

祝云渡收礼开心！
页: [1] 2 3
查看完整版本: 【漫步特效】苍兰诀TO 汐云渡 （十一种CSS动画）