爱莲说 - 学习马老师帖《CSS+HTML : 金球藏娇》 - 欢乐水吧 - 花潮论坛

杨帆发表于 2025-7-13 12:06

爱莲说 - 学习马老师帖《CSS+HTML : 金球藏娇》

本帖最后由杨帆于 2025-7-13 16:34 编辑 <br /><br /><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>爱莲说</title>
</head>
<body>
<style>
#mama { margin: 30px auto; left: calc(50% - 81px); transform: translateX(-50%);width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: #333 url('https://bbs.cnzv.cc/up/upload/pic/12/20241221-7b9d9f5f68c66a76a755bb0dda8a4c6d.png') no-repeat center/cover; box-shadow: 0 0 8px rgba(0, 0, 0, .65); overflow: hidden; user-select: none; z-index: 1; position: relative; }
#video1 { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; pointer-events: none; opacity: .99; }
   #video2 { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; pointer-events: none; opacity: .99; mix-blend-mode: screen; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); }
#layer { position: absolute; width: 50%; height:30%; filter: drop-shadow(-200px 100px 20px black); left: 25%; width: 50%; top: 65%; height: 30%; z-index: 1; }
#als { position: absolute; z-index: 1; clip-path: inset(0px 0px 170px 275px); mask-image: radial-gradient(ellipse 40% 20% at 80% 65%, rgba(0,0,0,0) 20%, rgba(0,0,0,1) 90%); -webkit-mask-image: radial-gradient(ellipse 40% 20% at 80% 65%, rgba(0,0,0,0) 20%, rgba(0,0,0,1) 90%); }
#ball { --size: 200px; position: absolute; width: var(--size); height: var(--size); filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.7)); left:78%; top: 68%; z-index: 5; }
#ball::before { position: absolute; content: ''; width: 100%; height: 100%; background: linear-gradient(45deg, gold, #daa520); border-radius: 50%; transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55); transform-origin: 50% 100%; z-index: 2; clip-path: inset(0 49.5% 0 0); left: 0; top: 0; }
#ball::after { position: absolute; content: ''; width: 100%; height: 100%; background: linear-gradient(45deg, gold, #daa520); border-radius: 50%; transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55); transform-origin: 50% 100%; z-index: 2; clip-path: inset(0 0 0 49.5%); left: 0; top: 0; }
#ball:hover::before { transform: rotate(-60deg); }
#ball:hover::after { transform: rotate(60deg); }
#ball img { position: absolute; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; z-index: 1; box-shadow: inset 0 0 30px rgba(255, 215, 0, 0.8); cursor: pointer; pointer-events: auto; }
</style>
<div id="mama">
<video id="video1" src="https://video-qn.51miz.com/vcg/video/preview/51miz42N1338602340.mp4" autoplay loop muted></video>
<video id="video2" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/17/17/55/video63662a4394bff.mp4" autoplay loop muted></video>
<img id=als src="https://pic1.imgdb.cn/item/687270cd58cb8da5c8a57f4d.png"
   style="width: 100%; height: 80%; position: absolute; left: -3%; top: 0%; opacity: .99; z-index: 1;" alt="" />
<div id="layer"></div>
<div id="ball">
   <img id="this.mObj" src="https://pic1.imgdb.cn/item/687286c458cb8da5c8a585fe.png" title="播放/暂停" alt="" />
</div>
</div>
<textarea style="visibility: hidden;" id="lrcContent">
爱莲说
词：【宋】周敦颐
曲：触耳先生（Mr.Truer）
编曲：触耳先生（Mr.Truer）
录/混音：触耳音乐工作室
水陆草木之花可爱者甚蕃
晋陶渊明独爱菊
自李唐来世人甚爱牡丹
予独爱莲之
出淤泥而不染
濯清涟而不妖
中通外直不蔓不枝
水陆草木之花可爱者甚蕃
晋陶渊明独爱菊
自李唐来世人甚爱牡丹
予独爱莲之
出淤泥而不染
濯清涟而不妖
中通外直不蔓不枝
香远益清亭亭净植
可远观而不可亵玩焉
予谓
菊花之隐逸者也
牡丹花之富贵者也
莲花之君子者也
噫菊之爱陶后鲜有闻
莲之爱同予者何人
牡丹之爱宜乎众矣
水陆草木之花可爱者甚蕃
晋陶渊明独爱菊
自李唐来世人甚爱牡丹
予独爱莲之
出淤泥而不染
濯清涟而不妖
中通外直不蔓不枝
香远益清亭亭净植
可远观而不可亵玩焉
予谓
菊花之隐逸者也
牡丹花之富贵者也
莲花之君子者也
噫菊之爱陶后鲜有闻
莲之爱同予者何人
牡丹之爱宜乎众矣
</textarea>
<script type="text/javascript">
var lrcPlayer = function () {
   return this.init.apply(this, arguments);
};
lrcPlayer.prototype = {
   constructor: lrcPlayer,
   init: function (opts) {
         this.lrcVec = new Array();
         this.lyricTxtObj = document.getElementById(opts.lrcTxtID);
         lyricTxt = this.lyricTxtObj.innerHTML;
         this.showLrcObj = document.getElementById(opts.lrcShowID);
         this.showLrcObj.style.fontSize = opts.gczh ? opts.gczh : '1em';
         this.showLrcObj.style.fontFamily = opts.gczt ? opts.gczt : '隶书';
         this.showLrcObj.style.fontWeight = opts.gcct ? 'bold' : 'normal';
         this.showLrcObj.style.textAlign = opts.dqfs ? opts.dqfs : 'center';
         this.showLrcObj.style.color = opts.gcys1 ? opts.gcys1 : 'gray';
         gcys = opts.gcys ? opts.gcys : 'red';
         sMode = opts.showMode ? opts.showMode : 0;
         this.sLine = opts.gchs ? opts.gchs : 1;
         this.isLoop = opts.playLoop ? opts.playLoop : false;
         this.handleLrc(lyricTxt);
         this.prepareShow(sMode, opts.shys);
         this.genPlayer(opts.audioURL);
         const ballImg = document.getElementById('this.mObj');
         ballImg.addEventListener('click', () => {
            const videos = document.querySelectorAll('#mama video');
            if (this.mObj.paused) {
               this.mObj.play();
               videos.forEach(video => video.play());
            } else {
               this.mObj.pause();
               videos.forEach(video => video.pause());
            }
         });
   },
   prepareShow: function (sMode, shys) {
         for (let k = 0; k < this.sLine; k++) {
            let sItem = document.createElement("span");
            sItem.style.display = "block";
            sItem.style.marginBottom = '4px';
            if (this.sLine % 2 === 1 && k === Math.floor(this.sLine / 2)) {
               sItem.style.color = gcys;
               sItem.style.fontSize = '120%';
               if (shys) {
                     shadowStr = '0 -1px 0px ' + shys + ',';
                     shadowStr += '-1px 0 0px ' + shys + ',';
                     shadowStr += '1px 0 0px ' + shys + ',';
                     shadowStr += '0 1px 0px ' + shys;
                     sItem.style.textShadow = shadowStr;
               }
            } else if (this.sLine % 2 === 0 && k === 0) {
               sItem.style.color = gcys;
               sItem.style.fontSize = '120%';
               if (shys) {
                     shadowStr = '0 -1px 0px ' + shys + ',';
                     shadowStr += '-1px 0 0px ' + shys + ',';
                     shadowStr += '1px 0 0px ' + shys + ',';
                     shadowStr += '0 1px 0px ' + shys;
                     sItem.style.textShadow = shadowStr;
               }
            }
            if (sMode != 0) sItem.style.textAlign = "left";
            this.showLrcObj.appendChild(sItem);
         }
         if (sMode != 0) {
            this.showLrcObj.style.writingMode = 'tb-rl';
            this.showLrcObj.style.msWritingMode = 'tb-rl';
            this.showLrcObj.style.mozWritingMode = 'vertical-rl';
            this.showLrcObj.style.webkitWritingMode = 'vertical-rl';
         }
   },
   handleLrc: function (lyricTxt) {
         var lyriclist = lyricTxt.split(/\r|\n|\r\n/);
         for (let n = 0; n < lyriclist.length; n++) {
            let chkTime = lyriclist.match(/\[\d{1,2}:\d{2}.\d{1,3}\]/g);
            if (chkTime) {
               let tIdx = lyriclist.lastIndexOf(']');
               if (tIdx > 0) lrcTxt = lyriclist.substr(tIdx + 1);
               for (let m = 0; m < chkTime.length; m++) {
                     let ta = chkTime.substr(1).replace(']', '').split(/:|\./);
                     let _t = parseFloat(parseInt(ta, 10) * 60 + parseInt(ta, 10) + '.' + ta, 10);
                     if (this.lrcVec.length == 0 && _t != 0) {
                        this.lrcVec.push();
                     }
                     this.lrcVec.push();
               }
            }
         }
         this.lrcVec.sort(function (a, b) { return (a - b) });
   },
   genPlayer: function (mUrl) {
         this.mObj = document.createElement("audio");
         this.mObj.loop = false;
         this.mObj.muted = false;
         this.mObj.src = mUrl;
         this.mObj.controls = true;
         this.mObj.style.opacity = 0.3;
         this.showLrcObj.appendChild(this.mObj);
         this.idx = 0;
         this.mObj.onended = () => {
            this.idx = 0;
            this.lyricTxtObj.innerHTML = '';
            if (this.isLoop) {
               this.mObj.play();
               const videos = document.querySelectorAll('#mama video');
               videos.forEach(video => video.play());
            } else {
               this.mObj.controls = true;
            }
         };
         this.mObj.onplaying = () => {
            this.mObj.controls = false;
            const videos = document.querySelectorAll('#mama video');
            videos.forEach(video => video.play());
         };
         this.mObj.onerror = () => {
            console.log("audio wrong, remove play start event");
            this.showLrcObj.style.display = 'none';
            this.showLrcObj.removeChild(this);
         };
         this.mObj.ontimeupdate = () => {
            if (this.idx < this.lrcVec.length) {
               if (this.mObj.currentTime > this.lrcVec) {
                     let _idx = this.idx;
                     let _spans = this.showLrcObj.getElementsByTagName('span');
                     for (let k = 0; k < this.sLine; k++) {
                        _spans.style.color = opts.gcys1 ? opts.gcys1 : 'gray';
                        _spans.style.fontSize = '100%';
                        _spans.style.textShadow = '';
                     }
                     for (let k = 0; k < this.sLine; k++) {
                        let displayIdx = _idx + k - Math.floor(this.sLine / 2);
                        if (displayIdx >= 0 && displayIdx < this.lrcVec.length) {
                           _spans.innerHTML = this.lrcVec;
                        } else {
                           _spans.innerHTML = "";
                        }
                     }
                     if (this.sLine % 2 === 1) {
                        let middleSpan = _spans;
                        middleSpan.style.color = gcys;
                        middleSpan.style.fontSize = '120%';
                        if (opts.shys) {
                           shadowStr = '0 -1px 0px ' + opts.shys + ',';
                           shadowStr += '-1px 0 0px ' + opts.shys + ',';
                           shadowStr += '1px 0 0px ' + opts.shys + ',';
                           shadowStr += '0 1px 0px ' + opts.shys;
                           middleSpan.style.textShadow = shadowStr;
                        }
                     } else if (this.sLine % 2 === 0) {
                        let firstSpan = _spans;
                        firstSpan.style.color = gcys;
                        firstSpan.style.fontSize = '120%';
                        if (opts.shys) {
                           shadowStr = '0 -1px 0px ' + opts.shys + ',';
                           shadowStr += '-1px 0 0px ' + opts.shys + ',';
                           shadowStr += '1px 0 0px ' + opts.shys + ',';
                           shadowStr += '0 1px 0px ' + opts.shys;
                           firstSpan.style.textShadow = shadowStr;
                        }
                     }
                     this.idx++;
               }
            }
         };
         try {
            this.mObj.play();
            const videos = document.querySelectorAll('#mama video');
            videos.forEach(video => video.play());
         } catch (err) {
            console.log(err.message);
         }
   },
   stopMusic: function () {
         this.mObj.pause();
         this.mObj.controls = false;
         this.mObj = null;
         const videos = document.querySelectorAll('#mama video');
         videos.forEach(video => video.pause());
   }
};
var opts = {
   lrcTxtID: 'lrcContent',
   lrcShowID: "layer",
   audioURL: "https://file.uhsea.com/2507/25a94a0b8c42985135bac517759857eaVZ.mp3",
   gczh: '38px',gczt: '隶书',gcys: '#FF1493',gcys1: '#B3EE3A',shys: 'gold',gcct: true,dqfs: 'center',showMode: 0,playLoop: true, gchs:3,
};
var km = new lrcPlayer(opts);
document.addEventListener('DOMContentLoaded', () => {
         const ball = document.getElementById('ball');

         ball.addEventListener('mouseenter', () => {
            ball.style.filter = 'drop-shadow(0 15px 30px rgba(255, 215, 0, 0.5))';
         });

         ball.addEventListener('mouseleave', () => {
            ball.style.filter = 'drop-shadow(0 10px 25px rgba(0, 0, 0, 0.7))';
         });
   });

</script>
</body>
</html>

梦江南 发表于 2025-7-13 12:38

我在这里看不到，把代码贴到其他网站，看到了非常漂亮，是金屋藏荷花呢。{:4_187:}

梦江南 发表于 2025-7-13 12:39

欣赏点赞！{:4_199:}

杨帆发表于 2025-7-13 13:16

梦江南发表于 2025-7-13 12:38
我在这里看不到，把代码贴到其他网站，看到了非常漂亮，是金屋藏荷花呢。

问好江南，谢谢鼓励，祝开心天天{:4_187:}

红影发表于 2025-7-13 15:00

真漂亮的制作，还带来了爱莲说的透明文字，还把那金球做成了播放器按钮。
欣赏杨帆好帖{:4_199:}

杨帆发表于 2025-7-13 16:33

红影发表于 2025-7-13 15:00
真漂亮的制作，还带来了爱莲说的透明文字，还把那金球做成了播放器按钮。
欣赏杨帆好帖

问好影子，谢谢鼓励，祝开心{:4_204:}

红影发表于 2025-7-13 17:01

杨帆发表于 2025-7-13 16:33
问好影子，谢谢鼓励，祝开心

问好杨帆，周日快乐{:4_187:}

页: [1]

花潮论坛's Archiver

爱莲说 - 学习马老师帖《CSS+HTML : 金球藏娇》