论坛 › 欢乐水吧 › 完善网友动画《心里落下相思泪》

亚伦影音工作室 发表于 2026-7-22 11:20

完善网友动画《心里落下相思泪》

本帖最后由 亚伦影音工作室 于 2026-7-22 11:23 编辑 <br /><br /><style>
#papa {
        margin: 10px 0 10px calc(10% - 390px);
        display: grid;
        place-items: center;
        width: 1286px;
        height: 720px;
        background-color: #740707;
        box-shadow: 3px 3px 20px #000;
        user-select: none;
        overflow: hidden;
        position: relative;
        z-index: 1;--state: running;
}

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

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

/* 幻灯片样式 */
.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);
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;
}



/* 百叶窗滑块容器 */
.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 1s ease ;
transform: translateY(0);
}

#lrc { --motion: cover2; --tt: 2s; position: absolute; left: 80%;font:normal 3em "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif"; color:transparent; z-index: 21;writing-mode: vertical-lr;white-space: pre;transform: translateY(0%);filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {position: absolute;content: attr(data-lrc); width: 10%; height: 100%; text-align: center;animation: var(--motion) var(--tt) linear forwards,bs 1sinfinite; animation-play-state: var(--state); }
@keyframes cover1{0% {
          opacity: 1; transform: scale(0);
          color:#ff0000;
        }
        50% {
          opacity: 1;color:#000078;
          transform: scale(1);
        }
        70% {
          opacity: 1;color:#880000;
          transform: scale(1);
        }
       
        100% {
          opacity: 1; transform: scale(1);
           color:#00aa00;
        }
       
}
@keyframes cover2 {0% {
          opacity: 1; transform: scale(0);
          color:#ff0000;
        }
        50% {
          opacity: 1;color:#000078;
          transform: scale(1);
        }
        70% {
          opacity: 1;color:#880000;
          transform: scale(1);
        }
       
        100% {
          opacity: 1; transform: scale(1);
           color:#00aa00;
        }
       
}
#btnplay { top:68%; left:6%;z-index: 100;
display: block;position: absolute;
    width: 150px; height: 220px;
    background: url(https://pic1.imgdb.cn/i/0fYmlgLV4HogPAvFGkqVRQ.png)no-repeat center/300px 220px;
animation: heart-burst steps(2) 2s infinite;
animation-play-state: var(--state);
}
@keyframes heart-burst {
0% {background-position: 0px 0;}
100% {background-position: -300px 0;}
}

#ptxt{width:100%;height:6px;font:800 18px/0px "STKaiti";color: #000;line-height:0px;bottom: 120px;left:12%;position: absolute;z-index: 110; }
#fullscreen{border-radius: 4px;position: absolute;
color:#eee;background:#0000;box-shadow:0px 0px 0px 0px #fff;
padding: 4px 8px;z-index: 100;
font:400 36px/0px "STKaiti";color: #fff;
border: none;
cursor: pointer;margin: 0px 0px;top:6%; left:6%;
}
</style>   
<div id="papa">
<!-- 滚动文字 -->
<div class="scrolling-text">请欣赏歌曲：亚伦音画工作室影音《心里落下相思泪》</div>
<button id="fullscreen">全屏观赏</button>
<!-- 图片幻灯片 -->
<div class="slide" style="opacity: 1;">
    <img src="https://pic1.imgdb.cn/i/1FbFaxIuChq8TvqpzBITLv.jpg" alt="图片1">
</div>
<div class="slide">
    <img src="https://pic1.imgdb.cn/item/6a471bb40e2237bfad5f9b41.png" alt="图片2">
</div>
<div class="slide">
    <img src="https://pic1.imgdb.cn/item/6a45b3b1d82989bc6ab05e50.png" alt="图片3">
</div>
<div class="slide">
    <img src="https://pic1.imgdb.cn/item/6a3f509b2546dff76d1b3edd.png" alt="图片4">
</div>
<div class="slide">
    <img src="https://pic1.imgdb.cn/i/67f6BJhjiIBot31D37eQUw.png" alt="图片5">
</div>
<div class="slide">
    <img src="https://pic1.imgdb.cn/i/0IgekWsQjy9JvS5A7KfspU.png" alt="图片6">
</div>
<divid="btnplay" ></div>
<div id="ptxt">0%</div>
<div id="lrc" data-lrc=""></div>
<!-- 效果选择区 -->
<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://music.163.com/song/media/outer/url?id=3369720232.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() {if(!aud.paused){
// 清除之前的效果
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 3s';
      slide.style.opacity = '1';
      }, 10);
      break;

    case 'slideLeft':
      // 从左侧滑入
      slide.style.transform = 'translateX(-100%)';
      slide.style.opacity = '1';
      setTimeout(() => {
      slide.style.transition = 'transform 1s 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 1s 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 1s 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 1s 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 1.5s, 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;


aud.addEventListener("timeupdate",function(){
                                var percent= aud.currentTime / aud.duration
                                var sp = 600 / 100 ;
                                var swidth =(percent * 100 * sp) + "px";
                                console.log(percent*100,swidth)
                                //保留2位小数
                                document.getElementById("ptxt").innerText = ((percent*100).toFixed(2))+"%"
                               
                        });

(function() {
         var mState = () => {papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      };
      aud.onplaying = aud.onpause = () => mState();
btnplay.onclick = () => aud.paused ? (aud.play(),reflect.unpauseAnimations()):(aud.pause(),reflect.pauseAnimations());
})();


let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                fs = !fs;
      };



</script>

<script>
(function() {
        let mKey = 0, mFlag = true;
        let lrcTime = (ar) => {let tmpAr = [];for(j = 0; j <ar.length - 1; j ++) {if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));}let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item,key) => {ar = item > aver ? aver : item;});return ar;};
        let averAdd = 0, offset = 0;
        let getLrcAr = (text) => {let lrcAr = [];let calcRule = ;for(x of text.split('\n')) {let ar = [];let re = /\d+[\.:]\d+([\.:]\d+)?/g;let geci = x.replace(re,'');if(geci) {geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');let time = x.match(re);if(time != null) {for(y of time) {let tmp = y.match(/\d+/g);let sec = 0;for(z in tmp) sec += tmp * calcRule;ar = ;lrcAr.push(ar); }}}}lrcAr.sort((a,b)=> a - b);return(lrcTime(lrcAr));}
        let geci = `《心里落下相思泪》

演唱：舒意

编辑制作：亚伦

春风他不懂花儿的伤

就像你不懂我的彷徨

我为谁化红妆

又为谁泪两行

满心欢喜最后却失望

明月它不懂思念的长

就像你不懂我的痴狂

我为谁守空窗

又为谁梦一场

一厢情愿最后撞南墙

就让大风吹进我心里落下相思泪

盼你归等你陪等到花枯萎

你若是春风

我就是流水

相依相偎今生为你醉

就让月儿笑话我为你犯下痴情罪

恨天黑怕伤悲怕你心有鬼

你若是冬雪

我就是寒梅

生生世世永远不后悔

春风他不懂花儿的伤

就像你不懂我的彷徨

我为谁化红妆

又为谁泪两行

满心欢喜最后却失望

明月它不懂思念的长

就像你不懂我的痴狂

我为谁守空窗

又为谁梦一场

一厢情愿最后撞南墙

就让大风吹进我心里落下相思泪

盼你归等你陪等到花枯萎

你若是春风

我就是流水

相依相偎今生为你醉

就让月儿笑话我为你犯下痴情罪

恨天黑怕伤悲怕你心有鬼

你若是冬雪

我就是寒梅

生生世世永远不后悔

`;
        let lrcAr = getLrcAr(geci);
        let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
        let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
        let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;}
        function playing() {
lrc.style.setProperty('--state', aud.paused ? 'paused' : 'running');
}
       
        aud.addEventListener('seeked', () => calcKey());
        aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
       
})();

</script>

杨帆 发表于 2026-7-22 14:02

切换自如，效果漂亮，谢谢亚伦老师精彩分享{:4_190:}

梦油 发表于 2026-7-22 16:59

欣赏精彩制作，问好亚伦快乐。

红影 发表于 2026-7-22 18:36

这么多图片轮播效果，真漂亮的制作。
欣赏亚伦老师好帖{:4_199:}

查看完整版本: 完善网友动画《心里落下相思泪》