网站首页 › ┫特效音画┣ › 【漫步特效】最好的时光/致亲朋们《11种CSS动画效果》

云端漫步 发表于 4 天前

【漫步特效】最好的时光/致亲朋们《11种CSS动画效果》

<style>
#mydiv {
        margin: 150px 0 30px calc(40% - 900px);
        display: grid;
        place-items: center;
        width: 1800px;
        height: 900px;
        background-color: #740707;
        box-shadow: 3px 3px 20px #000;
        user-select: none;
        overflow: hidden;
        position: relative;
        z-index: 1;
}

/* 滚动文字样式 */
.scrolling-text {
position: absolute;
top: 20px;
right: -100%;
white-space: nowrap;
color: red;
font-size: 24px;
font-weight: bold;
z-index: 200;
animation: scrollText 30s linear infinite;
}

@keyframes scrollText {
0% {
    transform: translateX(0);
    right: -100%;
}
100% {
    transform: translateX(-100%);
    right: 100%;
}
}

/* 幻灯片样式 */
.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: rgba(0,0,0,0.3);
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: #740707;
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="scrolling-text">致我亲爱的朋友们，名字不分前后。一鹿向北、风晴雪、花简静、令狐冲、雨声、姚云裳、向荣S、泪红颜、玫の玫、淥の詶、云笛、柒玥、清梦、愫怡、宁月、轻舞若芸。</div>

<!-- 图片幻灯片 -->
<div class="slide" style="opacity: 1;">
    <img src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/1/vmv1.jpg" alt="图片1">
</div>
<div class="slide">
    <img src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/1/vmv2.jpg" alt="图片2">
</div>
<div class="slide">
    <img src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/1/vmv3.jpg" alt="图片3">
</div>
<div class="slide">
    <img src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/1/vmv4.jpg" alt="图片4">
</div>

<!-- 视频覆盖层 -->
<video id="overlay" autoplay loop muted playsinline>
    <source src="https://img.tukuppt.com/video_show/2422006/00/01/70/5b4b1e2590ccc.mp4" type="video/mp4">
</video>

<video id="vid1" src="https://img.tukuppt.com/video_show/7165162/00/17/65/5ecb8fa5f0765.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://ting8.yymp3.com/new23/yangyuying4/10.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);
      
      // 创建8个滑块
      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();
}

// 右键提示
document.oncontextmenu = function() {
alert('-【漫步特效】-最好的时光-');
return false;
};

// 页面加载完成后初始化
window.onload = init;
</script>

圊圊淥詶 发表于 4 天前

谢谢漫步老师的精美特效，制作分享辛苦了哦~~{:1_153:}

圊圊淥詶 发表于 4 天前

问好漫步老师，帖子做的很棒，辛苦了{:1_154:}

玫の玫 发表于 4 天前

漫步老师制作精彩，色彩美美哒！特效棒棒哒{:1_154:}

玫の玫 发表于 4 天前

背景中暖黄色调的吊灯，以及摆放着书籍、花瓶的置物架，营造出温馨且富有格调的氛围。

玫の玫 发表于 4 天前

背景中暖黄色调的吊灯，以及摆放着书籍、花瓶的置物架，营造出温馨且富有格调的氛围。

玫の玫 发表于 4 天前

整体画面洋溢着复古与温情，女子的姿态与周围环境、文字相结合，仿佛在诉说那些镌刻在时光里的美好与眷恋。

玫の玫 发表于 4 天前

整体画面洋溢着复古与温情，女子的姿态与周围环境、文字相结合，仿佛在诉说那些镌刻在时光里的美好与眷恋。

绿蔷薇 发表于 4 天前

11种动画效果，做起来蛮复杂的，画面效果漂亮极了，漫步老师制作辛苦了~~~

绿蔷薇 发表于 4 天前

祝漫步老师的朋友们收礼开心~~~{:S01:}

查看完整版本: 【漫步特效】最好的时光/致亲朋们《11种CSS动画效果》