论坛 › 动画音画 › 点点宝宝快乐成长

杨帆 发表于 2025-1-9 22:54

点点宝宝快乐成长

本帖最后由 杨帆 于 2025-4-19 21:24 编辑 <br /><br /><style>
       #papa{margin: 130px 0 20px calc(50% - 721px);
        width: 1280px;
        height: 740px;
        background:url('https://pic1.imgdb.cn/item/677fbf25d0e0a243d4f2c9b0.gif') no-repeat center/cover;
        box-shadow: 0px 0px 0px 2px #ccc, 0px 0px 0px 8px #fff;
        position: relative;overflow: hidden;
        z-index: 1;}

      #wallpaper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            transition: background-image 1s ease-in-out ; /* 基础转场效果 */
      }

      /* 定义不同的转场效果 */
      .fade {
            animation: fadeEffect 3s forwards ;
      }

      @keyframes fadeEffect {
            from { opacity: 0; } 50% { opacity: 1; }
            to { opacity: 1; }
      }

      .slide-left {
            animation: slideLeftEffect 3s forwards ;
      }

      @keyframes slideLeftEffect {
            from { transform: translateX(100%); }50% { transform: translateX(0); }
            to { transform: translateX(0); }
      }


      .slide-right {
            animation: slideRightEffect 3s forwards ;
      }

      @keyframes slideRightEffect {
            from { transform: translateX(-100%); }50%{ transform: translateX(0); }
            to { transform: translateX(0); }
      }
.photo {animation: round 3s forwards;}
@keyframes round {0% {opacity: 1; transform:translate(0%,0%)scale(0)rotate(360deg);}
50% {opacity: 1;transform:translate(0%,0%)scale(1);}
100% {opacity: 1; transform:translate(0%,0%)scale(1);}
}
.huid {animation: yuoyu 3s forwards;}
@keyframes yuoyu {0% {opacity: 1; clip-path: ellipse(0% 00% at 50% 50%);}

30% {opacity: 1;clip-path: ellipse(50% 50% at 50% 50%);}
60% {opacity: 1; clip-path: ellipse(100% 100% at 50% 50%)}
100% {opacity: 1; clip-path: ellipse(100% 100% at 50% 50%)}
}
.guid {animation: guoyu 3s forwards;}
@keyframes guoyu {0% {opacity: 1; clip-path: circle(0 at 50% 100%);}
50% {opacity: 1; clip-path: circle(100% at 50% 100%);}
100% {opacity: 1; clip-path: circle(100% 100% at 50% 50%)}
}
.wguid {animation: wguoyu 3s forwards;}
@keyframes wguoyu {0% {opacity: 1; clip-path:circle(0% at 130% 50%);}
50% {opacity: 1; clip-path: circle(100% at 50% 100%);}
100% {opacity: 1; clip-path: circle(100% 100% at 50% 50%)}
}
.wmuid {animation: wmuoyu 3s forwards;}
@keyframes wmuoyu {0% {opacity: 1;transform:scale(0.8)scale3d(0,0,-300) skew(0,70deg);}
50% {opacity: 1;transform:scale(1);}
100% {opacity: 1;transform:scale(1)}
}

#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:linear-gradient(89deg, #EE0000 12%,#078504 35%,#060344 65%,#DE0000 90%);border:0px solid black;position: absolute;z-index: 6;font:normal 2.8em 华文新魏;color:#228B22;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 -1px 0);z-index: 15;}

#lrc{left: 15%;top: 75%;}#lrcc {left: 85%;transform: translate(-102%);top: 85%;}

#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 100%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg); clip-path: inset(0% 100% 0 0); -webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {to { clip-path: inset(0 0% 0 0);}}@keyframes cover2 {to { clip-path: inset(0 0 0 0);}}

#papa:hover #mplayer { transition: .7s; opacity: .99; }

#mplayer {z-index: 8;
        position: absolute;
        left: calc(92% - 15px);
        top:92%;
        width: 40px;
        height: 40px;
        border: 2px solid #000;
      box-shadow:0 0px 0px 6px #ccc;
      background: #ccc;
      border-radius: 50%;
        opacity: 0;
        transition: .7s;
        display: grid;
        place-items: center;
        --disp1: 0; --disp2: 1;
}

#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: #000;
        cursor: pointer;
        transition: .4s;
}

#mplayer::before {
        width: 0;
        height: 0;
        left: 15px;
        border-width: 10px 12px;
        border-color: transparent transparent transparent #000;
        opacity: var(--disp1);
}

#mplayer::after {
        width: 2px;
        height: 20px;
        border-width: 0 4px 0 4px;
        opacity: var(--disp2);
}

@keyframes opa { to {opacity: 1;} }

#fullscreen { position: absolute; top:92%; left:5%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 1.8em华文新魏; opacity: 0; cursor: pointer; z-index: 6}
#papa:hover #fullscreen { transition: .7s; opacity: .99;}

#vid { position: absolute; width: 100%; height: 120%; top:-10%;;object-fit: cover;mix-blend-mode: screen;webkit-mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; z-index: 2;opacity: .95; transition: 0.1s all ease;}

    </style>

<div id="papa">
    <div id="wallpaper"></div>
<audio id="aud" src="https://cccimg.com/view.php/fde5326a118a1b59ff394ab4c8f72f36.mp3" loop autoplay></audio>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
<video id="vid"src="https://bpic.588ku.com/video_listen/588ku_video/24/10/12/11/24/20/video6709ebe4f2224.mp4" muted autoplay></video>

<span id="fullscreen">全屏</span>
<div id="mplayer"></div>
</div>
<script>
(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

wallpaper.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>wallpaper.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>wallpaper.style.animationPlayState = 'paused');


})();


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

(function() {let vid = document.querySelector('vid');
let mState = () => aud.paused ?vid.pause() :vid.play();
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);})();

setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);

</script>
    <script>
      const wallpaper = document.getElementById('wallpaper');
      const images = [
            'url(https://pic1.imgdb.cn/item/677fbe90d0e0a243d4f2c98b.gif)',
            'url(https://pic1.imgdb.cn/item/677fbea9d0e0a243d4f2c98f.gif)',
            'url(https://pic1.imgdb.cn/item/677fbebed0e0a243d4f2c996.gif)',
            'url(https://pic1.imgdb.cn/item/677fbed4d0e0a243d4f2c99b.gif)',
            'url(https://pic1.imgdb.cn/item/677fbefcd0e0a243d4f2c9ac.gif)',
            'url(https://pic1.imgdb.cn/item/677fbf12d0e0a243d4f2c9af.gif)',
            'url(https://pic1.imgdb.cn/item/677fbf38d0e0a243d4f2c9b6.gif)',
            'url(https://pic1.imgdb.cn/item/677fbf4dd0e0a243d4f2c9b9.gif)',
            'url(https://pic1.imgdb.cn/item/677fcc7ed0e0a243d4f2cc3d.gif)',

            // 添加更多图片路径
      ];
      let currentIndex = 0;
      const effects = ['fade', 'slide-left', 'slide-right', 'photo', 'huid', 'guid', 'wguid', 'wmuid']; // 转场效果列表

      function changeWallpaper() {
      currentIndex = (currentIndex + 1) % images.length;
            const effect = effects; // 随机选择一个转场效果
            wallpaper.classList.remove(...effects); // 移除所有可能的类名
            wallpaper.classList.add(effect); // 添加新的转场效果类名
            wallpaper.style.backgroundImage = images;
      }

      setInterval(changeWallpaper, 5000); // 每5秒切换一次壁纸
    </script>
<span id="lrcStr" style="visibility: hidden;">
快乐成长
演唱：溜溜球
作词：朱欣
作曲：杨彬铖
制作人：袁梦
编曲：胡星杨彬铖
春风吹 鸟儿唱
小草在成长
小树枝 发嫩芽
你快快长大
蓝色的 小考拉
你快快起床
甜甜的 多彩糖
我和你分享
快乐的成长
有缤纷的梦想
梦的城堡里
爱莎公主陪我闯
开心的想象
会长出双翅膀
甜甜的梦想
有奶油蛋糕的清香
春风吹 鸟儿唱
小草在成长
小树枝 发嫩芽
你快快长大
蓝色的 小考拉
你快快起床
甜甜的 多彩糖
我和你分享
快乐的成长
有缤纷的梦想
梦的城堡里
爱莎公主陪我闯
开心的想象
会长出双翅膀
甜甜的梦想
有奶油蛋糕的清香

</span>
<script >
(function() {
/*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,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;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
      let lrcAr = [];
      let arr="";
      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) => {
      lrca=lrcAr;
      lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
      let Y=String(mKey/2).indexOf(".");
      if (Y == -1)
    {
      0==mKey&&(lrc.innerHTML=lrca);
      lrc.dataset.lrc = lrca;
    lrcc.innerHTML = lrcb;
      lrcc.dataset.lrc = "";
      lrc.style.setProperty('--motion', 'cover1');
      lrc.style.setProperty('--tt', time + 's');
      lrc.style.setProperty('--state', 'running');
    lrcc.style.setProperty('--motion', 'cover2');
      }
    else
    {
      lrc.innerHTML = lrcb;
      lrcc.dataset.lrc = lrca;
      lrc.dataset.lrc = "";
    lrcc.style.setProperty('--motion', 'cover1');
      lrcc.style.setProperty('--tt', time + 's');
      lrcc.style.setProperty('--state', 'running');
    lrc.style.setProperty('--motion', 'cover2');
      }
      mKey += 1;
};
/*函数 ：处理当前歌词索引 mKey*/
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"),lrcc.style.setProperty("--state","paused")):(lrc.style.setProperty("--state","running"),lrcc.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());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
</script>

梦江南 发表于 2025-1-10 08:42

好可爱的宝贝，欣赏点赞！{:4_199:}

杨帆 发表于 2025-1-10 10:54

梦江南 发表于 2025-1-10 08:42
好可爱的宝贝，欣赏点赞！

谢谢鼓励与支持，问好梦江南友友，小朋友都可爱呦

红影 发表于 2025-1-10 10:57

这小宝贝太可爱了，几乎每一张都笑得那么甜，让人看得心里喜欢得痒酥酥的，这么可爱的宝贝让人喜欢不够{:4_199:}

红影 发表于 2025-1-10 10:58

这首歌儿也好听。越看越喜欢，必须为了小宝贝亮起来{:4_187:}

红影 发表于 2025-1-10 10:59

祝福可爱的点点小宝贝{:4_204:}

杨帆 发表于 2025-1-10 11:04

红影 发表于 2025-1-10 10:58
这首歌儿也好听。越看越喜欢，必须为了小宝贝亮起来
问好管理员，谢谢鼓励、祝福与雅评，祝影子康乐天天{:4_187:}

小辣椒 发表于 2025-1-10 12:52

这个制作好，给小宝宝自己看看，她肯定会很开心的{:4_205:}

樵歌 发表于 2025-1-10 12:53

看着可爱的小宝贝儿，，可爱极了开心极啦。{:4_205:}

杨帆 发表于 2025-1-10 13:28

小辣椒 发表于 2025-1-10 12:52
这个制作好，给小宝宝自己看看，她肯定会很开心的

谢谢鼓励，建议也挺好，谢谢小辣椒{:4_187:}

杨帆 发表于 2025-1-10 13:29

樵歌 发表于 2025-1-10 12:53
看着可爱的小宝贝儿，，可爱极了开心极啦。

谢谢管理员雅评，祝福樵歌开心天天{:4_191:}

红影 发表于 2025-1-10 15:01

杨帆 发表于 2025-1-10 11:04
问好管理员，谢谢鼓励、祝福与雅评，祝影子康乐天天

太客气了，很可爱的宝贝呢{:4_187:}

梦油 发表于 2025-1-10 16:45

祖国的花朵，人类的希望。

杨帆 发表于 2025-1-10 18:59

梦油 发表于 2025-1-10 16:45
祖国的花朵，人类的希望。

问好超版，谢谢梦油友友雅评{:4_191:}

梦油 发表于 2025-1-11 10:29

杨帆 发表于 2025-1-10 18:59
问好超版，谢谢梦油友友雅评

杨帆朋友别客气。

查看完整版本: 点点宝宝快乐成长