杨帆 发表于 2026-9-18 17:02

说文解字

本帖最后由 杨帆 于 2026-9-18 20:02 编辑 <br /><br /><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="never">
<title>说文解字</title>
<style>
@import url("https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css");
@import url("https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap");
:root {--rState:running;}
#outBlk { position: relative; width: 600px; height: 85vh; background: #882200 url("https://638183.freep.cn/638183/small/webp/bg01.webp") no-repeat center/cover; overflow: hidden;margin:30px 0 0 calc(50%);transform:translate(-50%); box-shadow: 4px 4px 10px #000;z-index: 1; }
#fullscreen {position:absolute;top:1%;right:1%;font:normal 1.3em '楷体', 'Ma Shan Zheng';color:#fff;background: rgba(0,0,0,0.4);backdrop-filter: blur(4px);padding: 6px 14px;border-radius: 40px;cursor:pointer;z-index:98;transition:0.2s;}
   #fullscreen:hover {background:#ffb347; color:#1e2a3a; transform: scale(0.96);}
   zxx-slide {display: block;position: relative; width:100%;height:100%;overflow:hidden;}
.zxx-slide-a { position: absolute;width: 100%; height: 100%;pointer-events:none;top:-11%; }
.zxx-slide-a.in { z-index: 1; animation-duration: 2s; animation-name: tilt-in-fwd-tr;transition: 1.5s; }
.zxx-slide-img { width: 100%; height: 100%;transform: scaleY(0.95);}
@keyframes tilt-in-fwd-tr { 0% { transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg); opacity: 0; } 100% { transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg); opacity: 1; } }
.timeBox{ position:absolute; left:calc(80% - 45px);top:88%; color:#0066CC; font-size:16px; z-index:80; }
#outBlk:fullscreen .timeBox{position:absolute; left:88.5%;}
#rPlayer {position: absolute;pointer-events:auto;cursor: pointer;left:calc(75% + 10px);top:92%;z-index:99;transform-origin:50%; animation: rot 5s linear infinite var(--rState);}
#outBlk:fullscreen#rPlayer{position:absolute; left:90%;}
@keyframes rot{to {transform:rotate(1turn)}}
   .lrcShow {position: absolute;pointer-events:none;left:15%;top:90%;z-index:99;filter: drop-shadow(1px 0 0 white) drop-shadow(0 1px 0 white) drop-shadow(-1px 0 0 white) drop-shadow(0 -1px 0 white);font:bold 3rem 'Long Cang','ZCOOL KuaiLe',STLiti,"宋体","SimSun","Microsoft YaHei",sans-serif;background:linear-gradient(15deg,#CCFF66 21%,#33CC99 32%,#66CCCC 43%,#FF9900 52%,#FF3399 62%,#36F4B1 75%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.lrcShow::before { position: absolute; content: attr(data-lrc); width: 0%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: linear-gradient(180deg, var(--color1), var(--color2)); filter: inherit; background-clip: text; --color1: rgba(100,149,237,.75); --color2: rgba(0,191,255,.65);}
</style>
</head>
<body>
<div id="outBlk">
<span id="fullscreen">全屏欣赏</span>
<zxx-slide>      
      <a class="zxx-slide-a">
       <img class="zxx-slide-img" src="https://pic1.imgdb.cn/i/034QIJ5Vn8f0gYPEb1MfDO.png">
   </a>      
   <a class="zxx-slide-a">
       <img class="zxx-slide-img" src="https://pic1.imgdb.cn/i/034QIJ4efGST1sIFOBn2Cj.png">
   </a>
   <a class="zxx-slide-a">
       <img class="zxx-slide-img" src="https://pic1.imgdb.cn/i/034QIJ5qAGcKWqMsyIMozf.png">
   </a>
   <a class="zxx-slide-a">
       <img class="zxx-slide-img" src="https://pic1.imgdb.cn/i/034QIJ7jX30sEuVMNG2Gy6.png">
   </a>
   <a class="zxx-slide-a">
       <img class="zxx-slide-img" src="https://pic1.imgdb.cn/i/034QIJ6ONdX0JepR4iiME6.png">
   </a>
   <a class="zxx-slide-a">
       <img class="zxx-slide-img" src="https://pic1.imgdb.cn/i/034QIJ6tBMgoLTrZqYX0zE.png">
   </a>
   <a class="zxx-slide-a">
       <img class="zxx-slide-img" src="https://pic1.imgdb.cn/i/034QIOGANGJk8r7FWkspFm.png">
   </a>
   <a class="zxx-slide-a">
       <img class="zxx-slide-img" src="https://pic1.imgdb.cn/i/034QIOHttGakhUdpp30qts.png">
   </a>
   <a class="zxx-slide-a">
       <img class="zxx-slide-img" src="https://pic1.imgdb.cn/i/034QIOIhnmk41yE7nhXUkO.png">
   </a>
   <a class="zxx-slide-a">
       <img class="zxx-slide-img" src="https://pic1.imgdb.cn/i/034QIOIEwvAoYQNGsDwthf.png">
   </a>
   <a class="zxx-slide-a">
       <img class="zxx-slide-img" src="https://pic1.imgdb.cn/i/034QIOHpnQ9gozE6uQLDM2.png">
   </a>
   <a class="zxx-slide-a">
       <img class="zxx-slide-img" src="https://pic1.imgdb.cn/i/034QIOItt0FmjNmTcRLJXx.png">
   </a>
   <a class="zxx-slide-a">
       <img class="zxx-slide-img" src="https://pic1.imgdb.cn/i/034QIKKWx1PQyDeN58Lqyz.png">
   </a>
</zxx-slide>
        <img src="https://s3.bmp.ovh/2026/07/26/6a2GhyqP.png" width="50" height='50' id="rPlayer" title="播放/暂停" />
        <div class="timeBox">
                <span id="curTime">00:00</span> / <span id="durTime">00:00</span>
        </div>
        <div class="lrcShow" data-lrc=" 说文解字" >说文解字</div>       
</div>
<script>
const outBlk = document.getElementById('outBlk');
const aud = document.getElementById('aud');
var sf0 = document.createElement('script');
sf0.type = 'text/javascript';
sf0.src = "https://file.uhsea.com/2410/739c572b5176f670f350463cf9ade957QB.js";
sf0.charset = "utf-8";
document.body.appendChild(sf0);
sf0.onload = () => {
        let lrctxt = `
说文解字
演唱：灯叔、方大树
灯:
静字有个争
稳字有个急
争时要静
急时稳住心
树:
忙里有个亡
贪字近于贫
看淡名利
得失要宽心
合:
一念 一因果
一叹一花落
树:
世间本无对错
何必把心锁
合:
一笑一洒脱
半生就匆匆过
尝遍人间苦乐
方知我是我
灯:
愁字心上秋
思绪惹烦忧
树:
命里无时
莫须强求
合:
一念 一因果
一叹一花落
树:
世间本无对错
灯:
何必把心锁
合:
一笑一洒脱
半生就匆匆过
树:
尝遍人间苦乐
灯:
方知我是我
合:
一念 一因果
一叹一花落
世间本无对错
何必把心锁
合
一笑一洒脱
半生就匆匆过
尝遍人间苦乐
方知我是我
        `;
        let opts = {
                lrcTxt:lrctxt,
                audioURL:"https://www.joy127.com/url/159075.mp3",
        }
        let player = new lrcPlayerY(opts);
var eleZxxSlides = document.querySelectorAll('zxx-slide');
[].slice.call(eleZxxSlides).forEach(function(container) {
var timerSlide = null;
var eleSlides = [].slice.call(container.querySelectorAll('a'));
var indexSlide = eleSlides.length - 1;
function renderSlide() {
    eleSlides.forEach(function(slide, index) {
      slide.classList.toggle('in', indexSlide === index);
    });
}
function funSlide() {
    renderSlide();
    if (!player.mObj.paused) {
      clearTimeout(timerSlide);
      timerSlide = setTimeout(function() {
      indexSlide++;
      if (indexSlide >= eleSlides.length) indexSlide = 0;
      funSlide();
      }, 13000);
    }
}
renderSlide();
player.mObj.addEventListener('play', function() {
    if(timerSlide)clearTimeout(timerSlide);
    funSlide();
});
player.mObj.addEventListener('pause', function() {
    clearTimeout(timerSlide);
});
});
        let rPlayer = document.querySelector('#rPlayer');
        let curTimeDom = document.querySelector('#curTime');
        let durTimeDom = document.querySelector('#durTime');
        let formatTime = (time) => {
                if(isNaN(time)) return "00:00";
                let min = parseInt(time / 60);
                let sec = parseInt(time % 60);
                return ((min < 10 ? '0'+min:min) + ":" + (sec < 10 ? '0'+sec:sec));
        };
        player.mObj.addEventListener('timeupdate', function() {
                curTimeDom.textContent = formatTime(player.mObj.currentTime);
                durTimeDom.textContent = formatTime(player.mObj.duration);
        });
        rPlayer.onclick = (e) => {
                e.stopPropagation();
                if(player.mObj.paused){
                        rPlayer.style.setProperty('--rState','running');
                        player.mObj.play();
                }else{
                        rPlayer.style.setProperty('--rState','paused');
                        player.mObj.pause();
                }
        }
        document.body.addEventListener('click', ()=>{
    if(player.mObj.paused) player.mObj.play();
}, {once:true})
setTimeout(function() {
    if (player.mObj.paused) player.mObj.play();
}, 1500);
console.log(' 播放器已加载');
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
    if (!player.mObj.paused) {
      player.mObj.pause();      
    }
} else {
    if (player.mObj.paused) {
      player.mObj.play().catch(()=>{});         
    }
}
});
}
let fs = true,fsTimer;
const fullscreenBtn = document.getElementById('fullscreen');
fullscreenBtn.onclick = () => {
if (!document.fullscreenElement) {
    outBlk.requestFullscreen().catch(console.log);
    fullscreenBtn.innerText = '退出全屏';
} else {
    document.exitFullscreen();
    fullscreenBtn.innerText = '全屏欣赏';
}
};
outBlk.addEventListener('mousemove', () => {
clearTimeout(fsTimer);
fullscreenBtn.style.opacity = '1';
fsTimer = setTimeout(() => fullscreenBtn.style.opacity = '0', 2500);
});
</script>
</body>
</html>

杨帆 发表于 2026-9-18 17:22

代码来自难难老师分享作品，在此表示感谢{:4_180:}

霜染枫丹 发表于 2026-9-18 20:02

很有特点的佳作，欣赏学习，为您点赞~~{:4_204:}{:4_190:}

花甲走四方 发表于 2026-9-18 20:12

不错不错，很有创意的帖子{:4_178:}

杨帆 发表于 2026-9-18 21:17

霜染枫丹 发表于 2026-9-18 20:02
很有特点的佳作，欣赏学习，为您点赞~~

歌词内容不错，与大家分享，谢谢枫丹老师鼓励{:4_204:}

杨帆 发表于 2026-9-18 21:18

花甲走四方 发表于 2026-9-18 20:12
不错不错，很有创意的帖子

图片内容不错，与大家分享，谢谢走四方老师鼓励{:4_190:}

夕阳黄昏 发表于 2026-9-18 22:03

欣赏好帖！ 赞！

夕阳黄昏 发表于 2026-9-18 22:06

杨帆 发表于 2026-9-18 17:22
代码来自难难老师分享作品，在此表示感谢

电脑上的杀毒软件把屋舍判断为恶意网站，只见画面没有声音{:5_102:}

杨帆 发表于 2026-9-18 22:46

本帖最后由 杨帆 于 2026-9-18 22:48 编辑

夕阳黄昏 发表于 2026-9-18 22:06
电脑上的杀毒软件把屋舍判断为恶意网站，只见画面没有声音
我这儿正常呀，由衷感谢老师的源码与鼓励{:4_180:}

偶然~ 发表于 2026-9-18 23:13

有人说这首歌曲有抄袭《国家》嫌疑

红影 发表于 2026-9-18 23:18

这制作真赞。欣赏扬帆好帖{:4_199:}

杨帆 发表于 2026-9-18 23:19

偶然~ 发表于 2026-9-18 23:13
有人说这首歌曲有抄袭《国家》嫌疑

不清楚呢，这里只是分享一下

偶然~ 发表于 2026-9-18 23:21

杨帆 发表于 2026-9-18 23:19
不清楚呢，这里只是分享一下

觉得与《国家》的旋律差不多

杨帆 发表于 2026-9-18 23:22

红影 发表于 2026-9-18 23:18
这制作真赞。欣赏扬帆好帖

问好影子，谢谢鼓励{:4_187:}

杨帆 发表于 2026-9-18 23:23

偶然~ 发表于 2026-9-18 23:21
觉得与《国家》的旋律差不多

似乎是这样的呢

偶然~ 发表于 2026-9-18 23:50

杨帆 发表于 2026-9-18 23:23
似乎是这样的呢

{:4_180:}
页: [1]
查看完整版本: 说文解字