杨帆 发表于 2025-8-10 19:17

糖果屋里的小老虎 - 学习亚伦老师帖代码

本帖最后由 杨帆 于 2025-8-15 17:37 编辑 <br /><br /><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>糖果屋里的小老虎 - 贝乐虎儿歌</title>
</head>
<body>
<style>
#pa{margin: 30px auto; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 80vw, 1280px); height: auto; aspect-ratio: 16/9; background: linear-gradient(45deg, #e56420, #c22525, #3d9c31, #37bbde); box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; user-select: none; position: relative; --per:0%;--state: running;background-blend-mode: unset; animation: hue-rotate 3s linear infinite var(--state);overflow: hidden;}
#vid1{position: absolute;width: 100%;height:100%;object-fit:fill;mix-blend-mode: screen;mask: linear-gradient(to right top, red 0%, transparent 90%, transparent);-webkit-mask: linear-gradient(to right top, red 0%, transparent 90%, transparent);pointer-events: none; opacity: .8;}
#vid2 {position: absolute; width: 100%; height: 100%; object-fit: cover;opacity: 1; pointer-events: none;}
.pTitle { width: 50%; height: 20%; line-height: 2em; color: transparent; font-family: STLiti, NSimSun, 'Microsoft YaHei'; font-size: 50px; font-weight: bold; text-align: center; margin: auto; z-index: 5; position: absolute; left: 5%; top: 5%; }
.sp { animation: flashTitle 10s linear infinite var(--state); }
.pTitle span:nth-child(1) { animation-delay: 0s; }
.pTitle span:nth-child(2) { animation-delay: 0.5s; }
.pTitle span:nth-child(3) { animation-delay: 1.0s; }
.pTitle span:nth-child(4) { animation-delay: 1.5s; }
.pTitle span:nth-child(5) { animation-delay: 2.0s; }
.pTitle span:nth-child(6) { animation-delay: 2.5s; }
.pTitle span:nth-child(7) { animation-delay: 3.0s; }
.pTitle span:nth-child(8) { animation-delay: 3.5s; }
@keyframes flashTitle { 0%, 100% { color: white; text-shadow: 2px 2px 20px coral, 2px 2px 30px Orange, 2px 2px 40px Orange, 2px 2px 50px Orange, 2px 2px 60px Orange, 2px 2px 70px Orange, 2px 2px 80px coral; } 50%, 90% { color: transparent; text-shadow: none; } }
@keyframes flashing { 0% { filter: brightness(.8); } 100% { filter: brightness(1.2); } }
#player { position: absolute; width: 200px; height: 200px; filter: drop-shadow(100px 100px 20px DodgerBlue);right: 2%; bottom: 0%; perspective: 800px;z-index: 5; transform-style: preserve-3d; }
@keyframes hue-rotate {from {filter: hue-rotate(0);}to {filter: hue-rotate(360deg);}}
#player:hover { perspective: 300px;filter: drop-shadow(6px 6px 40px black) hue-rotate(130deg); --state: paused;z-index: 8; }
.sdiv { position: absolute; width: 200px; height: 200px; background: url('https://638183.freep.cn/638183/small/780.webp') no-repeat center/cover; cursor: pointer;filter: drop-shadow(0 0 60px black); transform: rotateX(45deg) rotateY(-15deg) rotateZ(0); animation: rot3d 6s linear infinite var(--state); }
@keyframes rot3d { to { transform: rotateX(45deg) rotateY(-15deg) rotateZ(360deg); } }
#pa::before { position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%; background: url('https://upfile.mp3.wf/view.php/caaacb619c7522860142a383d585707e.png') no-repeat center/cover; clip-path: polygon(0 100%,calc(50%+ 2px - var(--per))100%,calc(50%+ 2px - var(--per)) 0,0 0); transition: 2s; z-index: 10; }
#pa::after {position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%; background: url('https://upfile.mp3.wf/view.php/caaacb619c7522860142a383d585707e.png') no-repeat center/cover; clip-path: polygon(calc(50%- 2px + var(--per)) 100%,100% 100%,100% 0,calc(50%- 2px + var(--per)) 0); transition: 2s; z-index: 10; }
#pa:hover { --per: 50%; }
.candies {position: absolute;width: 100%;height: 100%;pointer-events: none;z-index: 3;}
.candy {position: absolute;width: 40px;height: 40px;background-size: contain;background-repeat: no-repeat;animation: float 8s infinite linear var(--state);opacity: .8;}      
@keyframes float {0% { transform: translateY(100vh) rotate(0deg); }100% { transform: translateY(-100px) rotate(360deg); } }
</style>
<div id="pa">
<div id="player">
      <div class="sdiv"></div>
    </div>   
    <audio id="audioPlayer" src="https://upfile.mp3.wf/view.php/d2295e6d08bc95545bc52d98c03bd694.mp3" autoplay loop></audio>   
    <video id="vid1" src="https://img.tukuppt.com/video_show/2402760/00/02/34/5b56bc45c5d1e.mp4" autoplay loop muted></video>   
    <video id="vid2" src="https://alicdn-data.mvbox.cn/live/vp/10/e9878bf149b7a026bfca631b84835605.mp4" autoplay loop muted></video>
    <div class="pTitle">
      <span class="sp">糖</span>
      <span class="sp">果</span>
      <span class="sp">屋</span>
      <span class="sp">里</span>
      <span class="sp">的</span>
      <span class="sp">小</span>
      <span class="sp">老</span>
      <span class="sp">虎</span>
      <span class="sp"></span>
    </div>
    <div class="candies" id="candyer"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const audioPlayer = document.getElementById('audioPlayer');
    const playerBtn = document.querySelector('#player');
    const pa = document.getElementById('pa');
    const candyer = document.getElementById('candyer');
      
    playerBtn.addEventListener('click', function() {
      if (audioPlayer.paused) {         
            audioPlayer.play();         
            pa.style.setProperty('--state', 'running');
      } else {         
            audioPlayer.pause();         
            pa.style.setProperty('--state', 'paused');
      }
    });
    var sf = document.createElement('script');
    sf.charset = 'utf-8';
    sf.src = 'https://638183.freep.cn/638183/web/js2024/yslrc_133703119608822812.js';
    document.body.appendChild(sf);
   
    sf.onload = () => {
      HCPlayer({
            papa: '#pa',
            geci: geci,
            skip: 0,
            average: 0,
            btnplay: '#player',
            lrc_css: 'z-index: 1;left: 50%; bottom: 48px;font: 55px/45px FZShuTi;color: Lime;transform: translateX(-50%);',
            fs_css: 'z-index: 1;right:-20px;top:18px; transform: translateX(-50%); --bg: transparent; --color: #fff',
      });
    };

    function createCandies() {
      const candyTypes = [ '&#127852;', '&#127853;', '&#127851;', '&#127850;', '&#127849;', '&#129473;', '&#127846;'
      ];
      
      for (let i = 0; i < 15; i++) {
            const candy = document.createElement('div');
            candy.className = 'candy';
            candy.style.left = `${Math.random() * 100}%`;
            candy.style.animationDelay = `${Math.random() * 5}s`;
            candy.style.fontSize = `${20 + Math.random() * 30}px`;
            candy.textContent = candyTypes;
            candyer.appendChild(candy);
      }
    }
});

var geci = `
糖果屋里的小老虎 - 贝乐虎儿歌
词：陈曼丽
曲：郎添怡
演唱：佑儿
糖果屋里住着一只可爱小老虎
清晨起床伸着懒腰迈着小碎步
突然间抬头 奔向不远处
来到一片 清澈大湖
湖面上倒影出那只可爱小老虎
它看到之后就快速往上扑
可爱小老虎 湖面上漂浮
自由自在 欢乐幸福
一二三四
可爱小老虎
二二三四
湖面上跳舞
三二三四
青蛙在敲鼓
四二三四
蝌蚪像音符
五二三四
蜻蜓在伴舞
六二三四
快要到日暮
七二三四
停下了舞步
八二三四
小老虎回到糖果屋
`;
</script>
</body>
</html>

红影 发表于 2025-8-10 21:40

很童趣的制作，鼠标触碰还会表面图片分开。
这制作真漂亮，欣赏杨帆好帖{:4_187:}

红影 发表于 2025-8-10 21:41

有闪烁的漂亮标题字，还有上升的糖果粒子呢，和歌曲十分匹配{:4_199:}

杨帆 发表于 2025-8-10 22:10

红影 发表于 2025-8-10 21:41
有闪烁的漂亮标题字，还有上升的糖果粒子呢，和歌曲十分匹配

童心不泯，开心天天！谢谢影子鼓励{:4_204:}

红影 发表于 2025-8-10 23:11

杨帆 发表于 2025-8-10 22:10
童心不泯，开心天天！谢谢影子鼓励

这帖子特别可爱，看得人心情真好{:4_187:}

梦江南 发表于 2025-8-11 09:10

旁边的小孩子是你的孙子吗？好可爱！{:4_187:}

梦江南 发表于 2025-8-11 09:11

有趣哦，谢谢杨帆带来的精彩制作。{:4_199:}

杨帆 发表于 2025-8-11 10:30

梦江南 发表于 2025-8-11 09:10
旁边的小孩子是你的孙子吗？好可爱！

对，前排中间C位是我家宝宝，谢谢江南{:4_204:}
页: [1]
查看完整版本: 糖果屋里的小老虎 - 学习亚伦老师帖代码