儿歌《蜗牛与黄鹂鸟》（学习寒冬残荷老师帖代码）

杨帆发表于 2025-11-1 15:32

本帖最后由杨帆于 2025-11-1 16:41 编辑 <br /><br /><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜗牛与黄鹂鸟 - 贝乐虎儿歌</title>
<link rel="stylesheet" href="https://file.uhsea.com/2511/498548aef86f5dfc3475286c023f8806IJ.css">
</head>
<body>
<style>
#papa {position: relative;background: url("https://pic1.imgdb.cn/item/6904ba403203f7be00bad765.jpg") 0 0 / 100% 100%;margin: 30px 0;left: calc(50% - 81px);transform: translateX(-50%);width: 1280px;height: 750px;box-shadow: 3px 3px 6px gray;overflow: hidden;display: grid;place-items: center;user-drag: none;user-select: none;--state:running;z-index: 1;}
.dh {position: absolute;width: 100%;height: 100%;filter: brightness(110%) saturate(120%);animation-name: rotateIn;animation-duration: 1s;z-index: 2;}
#fullscreen {position: absolute;top: 20px;left: 20px;font: normal 1.8em/1.5em 楷体;color: #fff;opacity: 0.7;cursor: pointer;z-index: 10;transition: opacity 0.3s;user-select: none;}
#fullscreen:hover {opacity: 1;font-style: italic;}
.lrc {position: absolute;bottom: -2%;left: 7%;width: 85.8%;height: 100px;z-index: 9;overflow: hidden;padding-top: 5px;}
.lrc #ullrc {width: 100%;padding: 0;list-style: none;transition: 0.3s all ease;margin: 0;}
.lrc #ullrc li {height: 50px;line-height: 50px;font-family:华文隶书;font-size: 0px;color: #000078;font-weight: normal;transition: 0.3s all ease;list-style-type: none;text-align: center;width: 100%;filter: drop-shadow(#00bfff 1px 0 0) drop-shadow(#00bfff 0 1px 0) drop-shadow(#00bfff -1px 0 0) drop-shadow(#00bfff 0 -1px 0);margin: 0 auto;letter-spacing: 5px;}
.lrc #ullrc li.active {font-size:40px;font-weight: 700;color: #0000ff;text-align: center;transform: translate(0%, 0%);filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#ccc -2px 0 0) drop-shadow(#ccc 0 -2px 0);}
#bt {width: 200px;overflow: hidden;color: #F0FFFF;position: absolute;right: 30px;bottom: 20px;font-size: 15px;}
</style>
<div id="papa">
<img id="img" class="dh animated" src="https://pic1.imgdb.cn/item/6904b9793203f7be00bad1c8.jpg" alt="" />
<span id="fullscreen">全屏欣赏</span>
<div class="lrc"><ul id="ullrc"></ul></div>
<css-doodle id="mplayer">
   :doodle {z-index: 80;@grid: 2 / 260px 80px;position: absolute;color: #fff;bottom: 30px;right: 30px;--prog: 0%;--size: 50px;--ttmsg1: '00:00';--ttmsg2: '00:00';--color: radial-gradient(#FFD700, #FFA500, #adff2f, #FA8072, #feca57);--state: paused;}
   @nth(1) {@place: 10% 80%;:after { content: var(--ttmsg1); }}
   @nth(2) {@size: var(--size);clip-path: @shape(points: 360; r: abs.sin(6.0t)*1.14;);@place: 45% 35%;background:var(--color);animation: rot 6s infinite linear var(--state);}
   @nth(3) {@place: 80% 80%;:after { content: var(--ttmsg2); }}
   @nth(4) {@place: 40% 80%;@size: 100% 4px;background: #bbb;display: grid;place-items: center start;:before { content: ''; width: var(--prog); height: 100%; background: var(--color); }}
   @keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=1417892372.mp3" autoplay loop></audio>
<span id="bt">《蜗牛与黄鹂鸟》</span>
</div>
<script>
   let fs = true;
   let fsTimer;
   let mp = true;
   let mpTimer;
   let isFullscreen = true;
   const fullscreenBtn = document.getElementById('fullscreen');const mplayer = document.getElementById('mplayer');
   const papaBox = document.getElementById('papa');
   fullscreenBtn.onclick = () => {
         if (isFullscreen) {
            fullscreenBtn.innerText = '退出全屏';
            if (papaBox.requestFullscreen) {
               papaBox.requestFullscreen();
            } else if (papaBox.webkitRequestFullscreen) {
               papaBox.webkitRequestFullscreen();
            } else if (papaBox.msRequestFullscreen) {
               papaBox.msRequestFullscreen();
            }
         } else {
            fullscreenBtn.innerText = '全屏欣赏';
            if (document.exitFullscreen) {
               document.exitFullscreen();
            } else if (document.webkitExitFullscreen) {
               document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) {
               document.msExitFullscreen();
            }
         }
         isFullscreen = !isFullscreen;
   };
      papa.addEventListener('mousemove', () => {
         clearTimeout(fsTimer);
         fullscreen.style.opacity = '1';
         fsTimer = setTimeout(() => {
            fullscreen.style.opacity = '0';
         }, 3000);
   });
      papa.addEventListener('mousemove', () => {
         clearTimeout(mpTimer);
         mplayer.style.opacity = '1';
         mpTimer = setTimeout(() => {
            mplayer.style.opacity = '0';
         }, 3000);
   });
document.addEventListener('fullscreenchange', () => {
fs = !document.fullscreenElement;
fullscreen.innerText = fs ? '全屏欣赏' : '退出全屏';
});
   const imgs = [
"https://pic1.imgdb.cn/item/6904b9793203f7be00bad1c8.jpg",
"https://pic1.imgdb.cn/item/6904b9793203f7be00bad1c0.jpg",
"https://pic1.imgdb.cn/item/6904b97c3203f7be00bad1d8.jpg",
"https://pic1.imgdb.cn/item/6904b97d3203f7be00bad1e4.jpg",
"https://pic1.imgdb.cn/item/6904b97b3203f7be00bad1d3.jpg",
"https://pic1.imgdb.cn/item/6904b9813203f7be00bad1fb.jpg",
"https://pic1.imgdb.cn/item/6904ba253203f7be00bad60a.jpg",
"https://pic1.imgdb.cn/item/6904ba843203f7be00bad986.jpg",
"https://pic1.imgdb.cn/item/6904ba403203f7be00bad765.jpg",
"https://pic1.imgdb.cn/item/6904ba483203f7be00bad7a7.jpg",
"https://pic1.imgdb.cn/item/6904ba283203f7be00bad63c.jpg",
"https://pic1.imgdb.cn/item/6904ba323203f7be00bad6b9.jpg",
"https://pic1.imgdb.cn/item/6904bac53203f7be00bada44.jpg",
"https://pic1.imgdb.cn/item/6904bac43203f7be00bada42.jpg",
"https://pic1.imgdb.cn/item/6904bac53203f7be00bada46.jpg",
"https://pic1.imgdb.cn/item/6904bac43203f7be00bada43.jpg",
"https://pic1.imgdb.cn/item/6904bac53203f7be00bada48.jpg",
"https://pic1.imgdb.cn/item/6904bb163203f7be00badbec.jpg",
"https://pic1.imgdb.cn/item/6904bb103203f7be00badbd8.jpg",
"https://pic1.imgdb.cn/item/6904bb103203f7be00badbdb.jpg"
   ];
const dhlm =
      ["bounce","flash","pulse","rubberBand","shake","swing","tada","wobble","jello","bounceIn","bounceInDown","bounceInLeft","bounceInRight","bounceInUp","fadeIn","fadeInDown","fadeInLeft","fadeInRight","fadeInUp","flip","flipInX","flipInY","lightSpeedIn","rotateIn","rotateInDownLeft","rotateInDownRight","rotateInUpLeft","rotateInUpRight","rollIn","zoomOutUp","zoomOutRight","zoomOutLeft","zoomOutDown","zoomOut","zoomInUp","zoomInRight","zoomInLeft","zoomInDown","zoomIn","headShake","bounceOut","bounceOutDown","bounceOutLeft","bounceOutRight","bounceOutUp","fadeInDownBig","fadeInLeftBig","fadeInRightBig","fadeInUpBig","fadeOut","fadeOutDown"," fadeOutDownBig","fadeOutLeft","fadeOutLeftBig","fadeOutRight","fadeOutRightBig","fadeOutUp","fadeOutUpBig","flipOutX","flipOutY","lightSpeedOut","rotateOut","rotateOutDownLeft","rotateOutDownRight","rotateOutUpLeft","rotateOutUpRight","hinge","rollOut","slideInDown","slideInLeft","slideInRight","slideInUp","slideOutDown","slideOutLeft","slideOutRight","slideOutUp"];
   let imgIndex = 0;
   let animIndex = 0;
   const imgElement = document.getElementById('img');
   let carouselTimer = null;
   function switchImg() {
         imgElement.src = imgs;
         imgElement.style.animationName = 'none';
         setTimeout(() => {
            imgElement.style.animationName = dhlm;
            imgElement.style.animationDuration = '1.8s';
         }, 50);
         imgIndex = (imgIndex + 1) % imgs.length;
         animIndex = (animIndex + 1) % dhlm.length;
   }
   function startCarousel() {
         if (!carouselTimer) {
            carouselTimer = setInterval(switchImg, 3700);
         }
   }
   function stopCarousel() {
         clearInterval(carouselTimer);
         carouselTimer = null;
   }
   startCarousel();
   (function() {
         let clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
         let script = document.createElement('script');
         script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
         document.head.appendChild(script);
         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 mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
         mplayer.title = '暂停';
         aud.addEventListener('play', mState, false);
         aud.addEventListener('pause', mState, false);
         aud.addEventListener('timeupdate', () => {
            mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
            mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
            mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
         });
         mplayer.onclick = () => {
            if(clickIdx === 1) aud.paused ? aud.play() : aud.pause();
            if(clickIdx === 2) aud.currentTime = progChg;
            mplayer.title = aud.paused ? '播放' : '暂停';
         }
         mplayer.onmousemove = (e) => {
            let size = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--size')),
               ww = mplayer.offsetWidth,
               hh = mplayer.offsetHeight;
            clickIdx = e.offsetY > hh/1.5 ? 2 :
                     (e.offsetX > (ww - size)/2 && e.offsetX < (ww + size)/2 && e.offsetY < hh/1.5 ? 1 : 0);
            mplayer.style.cursor = cursors;
            if(clickIdx > 1) progChg = aud.duration * e.offsetX / ww;
         }
   })();
   var lrc = `
祝福点点宝宝健康快乐成长~
蜗牛与黄鹂鸟 - 贝乐虎儿歌
阿门阿前一棵葡萄树
阿嫩阿嫩绿地刚发芽
蜗牛背著那重重的壳呀
一步一步地往上爬
阿树阿上两只黄鹂鸟
阿嘻阿嘻哈哈在笑它
葡萄成熟还早地很哪
现在上来干什么
阿黄阿黄鹂儿不要笑
等我爬上它就成熟了
阿门阿前一棵葡萄树
阿嫩阿嫩绿地刚发芽
蜗牛背著那重重的壳呀
一步一步地往上爬
阿树阿上两只黄鹂鸟
阿嘻阿嘻哈哈在笑它
葡萄成熟还早地很哪
现在上来干什么
阿黄阿黄鹂儿不要笑
等我爬上它就成熟了

`;
   function $(id) {
         return document.getElementById(id);
   }
   function getLrcArray() {
         var parts = lrc.split("\n");
         for (let index = 0; index < parts.length; index++) {
            parts = getLrcObj(parts);
         }
         return parts;
         function getLrcObj(content) {
            var twoParts = content.split("]");
            var time = twoParts.substr(1);
            var timeParts = time.split(":");
            var seconds = +timeParts;
            var min = +timeParts;
            seconds = min * 60 + seconds;
            var words = twoParts;
            return {
               seconds: seconds,
               words: words,
            };
         }
   }
   var lrcArray = getLrcArray();
   function inputLrc() {
         for (let index = 0; index < lrcArray.length; index++) {
            var li = document.createElement("li");
            li.innerText = lrcArray.words;
            $("ullrc").appendChild(li);
         }
   }
   inputLrc();
   function setPosition() {
         var index = getLrcIndex();
         if (index == -1) {
            return;
         }
         var lrc_li_height = 50, lrc_ul_height = 50;
         var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;

         if (top < 0) {
            top = 0;
         }
         $("ullrc").style.marginTop = -top + "px";
         var activeLi = $("ullrc").querySelector(".active");

         if(activeLi){
            activeLi.classList.remove("active");
         }
         $("ullrc").children.classList.add("active");
   }
   var turn = 0;
   function getLrcIndex(){
         var time = $("aud").currentTime + turn;
         for (var index = 0; index < lrcArray.length; index++) {
            if (lrcArray.seconds > time) {
               return index - 1;
            }
         }
   }
   $("aud").ontimeupdate = setPosition;

   aud.addEventListener('playing', function() {
         startCarousel();
   });
   aud.addEventListener('pause', function() {
stopCarousel();
});
</script>
</body>
</html>

梦江南 发表于 2025-11-1 15:36

这是你家的宝贝吗？很可爱。{:4_187:}

梦江南 发表于 2025-11-1 15:39

这种相册很好，记录了宝宝成长。{:4_199:}

杨帆发表于 2025-11-1 15:46

梦江南发表于 2025-11-1 15:36
这是你家的宝贝吗？很可爱。

对呀，我家宝宝很喜欢看有关她的帖子，就做了这个，谢谢江南{:4_204:}

樵歌发表于 2025-11-1 16:17

太好了啦！你家宝贝好可爱，好乖哦{:4_199:}

樵歌发表于 2025-11-1 16:17

宝贝成长记！

杨帆发表于 2025-11-1 16:45

樵歌发表于 2025-11-1 16:17
太好了啦！你家宝贝好可爱，好乖哦

我家宝贝喜欢看有关自己的帖子呢，谢谢樵歌管理员{:4_176:}

梦油发表于 2025-11-1 17:51

歌曲好听，小朋友可爱。

杨帆发表于 2025-11-1 17:56

梦油发表于 2025-11-1 17:51
歌曲好听，小朋友可爱。

谢谢梦油超版雅评，祝福童心不眠，福寿绵长{:4_190:}

梦油发表于 2025-11-1 20:20

杨帆发表于 2025-11-1 17:56
谢谢梦油超版雅评，祝福童心不眠，福寿绵长

谢谢你的美好祝福。

小辣椒 发表于 2025-11-1 21:45

欣赏杨帆的精彩图片转换效果{:4_199:}

小辣椒 发表于 2025-11-1 21:47

宝宝很可爱，还是建议杨帆学习一下PS的基础工具操作，图片应该等比例取图尺寸，这样人物不会变形

小辣椒 发表于 2025-11-1 21:48

歌曲也是宝宝喜欢的吧，再次欣赏杨帆好制作，祝福宝宝健康成长！

杨帆发表于 2025-11-1 22:02

小辣椒发表于 2025-11-1 21:48
歌曲也是宝宝喜欢的吧，再次欣赏杨帆好制作，祝福宝宝健康成长！

问好小辣椒，歌曲也是宝宝喜欢的，祝童心不眠，开心天天{:4_204:}

杨帆发表于 2025-11-1 22:06

小辣椒发表于 2025-11-1 21:47
宝宝很可爱，还是建议杨帆学习一下PS的基础工具操作，图片应该等比例取图尺寸，这样人物不会变形

很好的建议，PS以前学过一段时间，后来不常用又陌生了{:4_173:}

樵歌发表于 2025-11-2 13:12

杨帆发表于 2025-11-1 16:45
我家宝贝喜欢看有关自己的帖子呢，谢谢樵歌管理员

那就好呵，小可爱真的好乖好乖。{:4_204:}

杨帆发表于 2025-11-2 14:42

樵歌发表于 2025-11-2 13:12
那就好呵，小可爱真的好乖好乖。

谢谢管理员，祝童心不泯、开心天天{:4_176:}

红影发表于 2025-11-3 21:41

好可爱的点点宝贝，被家人深爱的宝贝。
制作漂亮，欣赏杨帆好帖{:4_199:}

杨帆发表于 2025-11-3 22:59

红影发表于 2025-11-3 21:41
好可爱的点点宝贝，被家人深爱的宝贝。
制作漂亮，欣赏杨帆好帖

问好影子，谢谢影子，祝童心不眠，开心天天{:4_171:}

偶然~ 发表于 2025-11-17 13:49

来欣赏杨帆的精品佳作，祝您创作如春泉涌流不息！

页: [1]

花潮论坛's Archiver

儿歌《蜗牛与黄鹂鸟》（学习寒冬残荷老师帖代码）