论坛 › 欢乐水吧 › 独家动图切换控制 就让岁月开成一朵花

亚伦影音工作室 发表于 2026-5-11 16:58

独家动图切换控制 就让岁月开成一朵花

本帖最后由 亚伦影音工作室 于 2026-5-11 17:04 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#mydiv {
    margin: 0px -300px;
      display: grid;
      
      width: 1186px;
      height: 640px;
      background-color: #333;
      
      overflow: hidden;
      position: relative;
      z-index: 1;--state: running;
}


.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; pointer-events: none;

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 1.5s ease-out forwards var(--state);
}

@keyframes blurToClear {
from {
    filter: blur(20px);
    opacity: 0;
}
to {
    filter: blur(0);
    opacity: 1;
}
}
#xiaobo {z-index: 100;
      width: 350px;
      height: 220px;cursor: pointer;
      margin: 120px 20px;
      position: absolute;
      overflow: hidden;
      
      }
.hexahedron {width: 210px;border: 2px solid #555;
      height: 210px;
      margin: 0px 0px;
         position: relative;
      background:url(https://pic1.imgdb.cn/item/69f6d4a598d7db9e97813aeb.png)no-repeat -120px 0px/cover;
      border-radius: 12px;mask: radial-gradient(circle at 98% 50%,transparent 40px,#red 0%);-webkit-mask: radial-gradient(circle at 98% 50%,transparent 40px,red 0%); }


#cp { position: relative; top: 0px; left: 0px;width: 200px; height: 200px;transition: 6s;animation:opentop 0.5s linear 1s ;background:repeating-radial-gradient(#000, #000 8px, #444 9px);border-radius: 50%;box-shadow:0px 0px 0px 1px #aaa,0px 0px 0px 4px #555;}
.overlay {z-index: 1;
content: '';
left: 0px;
top: 0px;
position: absolute;
width: 200px;
height: 200px;
background: linear-gradient(-45deg, transparent, 35%, rgba(224,255,255,0.35),65%,transparent);
border-radius: 50%;
}


.inner {z-index: 2;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
box-shadow:0px 0px 0px 1px #333,0px 0px 0px 2px #aaa;

background:#5a4532 url()no-repeat center/cover;
border-radius: 50%;
}
.inner::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
background: #aa2;
border-radius: 50%;
}

#all {position: absolute;width:200px; height:200px;top: 7px; left: 110px;z-index: -1; transition: 2s; animation:tion3s linear 1.5s infinite}
@keyframes opentop { 0% {transform: translatex(-50px);} 100% { transform:rotateX(0px);}}
@keyframes tion { 0% {} 100% { transform:rotate(360deg) } }
#smsvg{ z-index: 10;position: relative;
    left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.lrc{z-index: 20;
    width: 620px;bottom:10px; left:25%;
    height: 150px;
    overflow: hidden;
    display: block;position: absolute;
    }

#lrc { --motion: cover2; --tt: 1s; --bg: linear-gradient(90deg,#e56420, #c22525, #3d9c31, #37bbde, #000080,#ff0000) ; position: absolute;bottom: 60px; left: 50%; text-align: center;transform: translateX(-50%);font: 300 3em "Ma Shan Zheng","SimHei", "Arial", "sans-serif"; color:#000080; white-space: pre; -webkit-background-clip: text; filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0); pointer-events: none; z-index: 100;}
      #lrc::before { position: absolute; content: attr(data-lrc); width: 0%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: var(--bg);background-clip: text; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }

</style>

<div id="mydiv">
<div class="slide">
    <img   id="source1" src="https://pic1.imgdb.cn/item/6a0196fc514fff0f73776a30.gif">
</div>
<div class="slide">
    <img   id="source2" src="https://pic1.imgdb.cn/item/6a019702514fff0f73776a31.gif">
</div>
<div class="slide">
   <img   id="source3" src="https://pic1.imgdb.cn/item/6a019708514fff0f73776a32.gif">
</div>
<div class="slide">
   <img   id="source4" src="https://pic1.imgdb.cn/item/69f82ce1b681ce9bfd1dce63.gif">
</div>
    <div class="slide">
       <img   id="source5" src="https://pic1.imgdb.cn/item/6a0198cd514fff0f73776a69.gif">
      </div>
      <div class="slide">
      <img   id="source6" src="https://pic1.imgdb.cn/item/6829abbe58cb8da5c8fb092c.gif">
      </div>
<audio id="aud" src="https://s2.cldisk.com/sv-w9/audio/a3/bc/69/def4138af0f53fc9bb3e774c4fc083e3/audio.mp3"loopautoplay ></audio>

<div id="xiaobo">
<div class="hexahedron"></div>
<div id="all">
<divid="cp" ><div class="inner"><svgid="smsvg"width="200px" height="200px">
        <defs>
                <path id="path" d="M0 100 A100 100 0 1 1 200 100 A100 100 0 1 1 0 100"/>
        </defs>
        <text dx="77" dy="77" font-size="12" fill="#00ff00"font-family="'楷体'">
                <textPath href="#path" textLength="535"> 花潮论坛 亚伦影音工作室 </textPath>
        </text>
</svg>
</div> <div class="overlay"></div>
</div>
</div>
</div>

<divclass="lrc">
<div id="lrc" data-lrc=""></div>
</div>

</div>

<script>
let mState = () => {xiaobo.style.setProperty('--state', aud.paused ?'paused' : 'running');};

xiaobo.onclick = () =>aud.paused ? (all.style.left = '110px',all.style.animationPlayState = 'running'):(all.style.left = '30px',all.style.animationPlayState = 'paused');



</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, 8000);
}

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

window.onload = init;
</script>
<script >
(function() {
let gc=`放慢脚步 听一听耳边的风
制作人：亚伦
词：吴忧 曲：吴忧
出品方：亚伦影音
出品人：亚伦
代码独家设计：亚伦
【未经著作权人许可不得翻唱翻录或使用】
放慢脚步 听一听耳边的风
半生光阴 轻的就像一场梦
不争不求 也不问人海匆匆
只想贪恋 此刻眼底的晴空
推开门窗 迎一抹夕阳的红
就让喧嚣 都留在烟雨之中
几分淡泊 换来一路的从容
烟火人间 且行且望且随风
就让岁月开成一朵花
人生啊又何处不芳华
任凭光阴流转
年轮又添笔画
爱在时光中轻轻发芽
就让岁月开成一朵花
等一场春风温柔抵达
带着知足上路
带着晚霞回家
爱在时光中轻轻发芽
推开门窗 迎一抹夕阳的红
就让喧嚣 都留在烟雨之中
几分淡泊 换来一路的从容
烟火人间 且行且望且随风
就让岁月开成一朵花
人生啊又何处不芳华
任凭光阴流转
年轮又添笔画
爱在时光中轻轻发芽
就让岁月开成一朵花
等一场春风温柔抵达
带着知足上路
带着晚霞回家
爱在时光中轻轻发芽
爱在时光中轻轻发芽

`;

let mKey = 0, mFlag = true, averAdd = 0.3;

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 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 showLrc = (time) => {
        let name = mFlag ? 'cover1' : 'cover2';
        lrc.innerHTML = lrcAr;
        lrc.dataset.lrc = lrcAr;
        lrc.style.setProperty('--motion', name);
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
        mKey += 1;
        mFlag = !mFlag;
};
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;
}

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 mState = () => aud.paused ? (lrc.style.setProperty('--state','paused')) : (lrc.style.setProperty('--state','running'));
aud.addEventListener('timeupdate', () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});

aud.addEventListener('pause', () => mState());/**/

let lrcAr = getLrcAr(gc); /**/

})();
</script>

<script>
const renderGif = function (dom) {
    if (!dom || !dom.src) {
      return;
    }
    // gif图片的url地址
    const src = dom.src;

    // 创建的用来播放gif的canvas元素
    const canvas = document.createElement('canvas');
    const context = canvas.getContext("2d");

    // 一些与GIF播放有关的变量
    let imageDecoder = null;
    let imageIndex = 0;
    let paused = false;

    // 绘制方法
    const renderImage = function (result) {
      context.drawImage(result.image, 0, 0);

      const track = imageDecoder.tracks.selectedTrack;

      // 如果播放结束，从头开始循环
      if (imageDecoder.complete) {
            if (track.frameCount === 1) {
                return;
            }

            if (imageIndex + 1 >= track.frameCount) {
                imageIndex = 0;
            }
      }

      // 绘制下一帧内容
      imageDecoder
            .decode({ frameIndex: ++imageIndex })
            .then((nextResult) => {
                if (paused === false) {
                  setTimeout(() => {
                        renderImage(nextResult);
                  }, result.image.duration / 1200.0);
                } else {
                  canvas.nextResult = nextResult;
                }
            })
            .catch((e) => {
            // imageIndex可能超出的容错处理
            if (e instanceof RangeError) {
                imageIndex = 0;
                imageDecoder.decode({ frameIndex: imageIndex }).then(renderImage);
            } else {
                throw e;
            }
      });
    };

    // 判断地址能够请求
    fetch(src).then((response) => {
      // 可以请求，进行样式处理
      // 设置canvas尺寸
      canvas.width = dom.naturalWidth;
      canvas.height = dom.naturalHeight;
      // 实际显示尺寸
      canvas.style.width = dom.clientWidth + 'px';
      canvas.style.height = dom.clientHeight + 'px';
      // 隐藏图片，显示画布
      dom.after(canvas);
      dom.style.position = 'absolute';
      dom.style.opacity = '0';

      // 将GIF绘制在canvas上
      imageDecoder = new ImageDecoder({
            data: response.body,
            type: "image/gif"
      });
      // 解析第一帧并绘制
      imageDecoder.decode({
            frameIndex: imageIndex
      }).then(renderImage);
    });

    // 事件绑定处理
dom.addEventListener('ended',function () {
      if (paused) {
            paused = false;
            renderImage(canvas.nextResult);
      } else {aud.pause();
            paused = true;
      }
    });
canvas.addEventListener('ended',function () {
      if (paused) {
            paused = false;
            renderImage(canvas.nextResult);
      } else {
            paused = true;
      }
    });
xiaobo.addEventListener('click', function () {
      if (paused) {aud.play();
            paused = false;
            renderImage(canvas.nextResult);
      } else {aud.pause();
          paused = true;
      }
    });
};
renderGif(source1);renderGif(source2);renderGif(source3);renderGif(source4);renderGif(source5);renderGif(source6);
</script>

杨帆 发表于 2026-5-11 17:11

切换顺畅，效果漂亮，谢谢亚伦老师精彩示范{:4_190:}

小文 发表于 2026-5-11 17:31

好听，唯美！欣赏

红影 发表于 2026-5-11 21:00

切换很丝滑，制作非常漂亮。
欣赏亚伦老师好帖{:4_199:}

查看完整版本: 独家动图切换控制 就让岁月开成一朵花