桃花红杏花白

杨帆发表于 2026-4-2 12:07

本帖最后由杨帆于 2026-4-2 15:59 编辑 <br /><br /><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="referrer" content="never" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>桃花红杏花白</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Wang+Xi+Zhi&family=Zhao+Meng+Fu&family=Ou+Yang+Xun&display=swap");
#papa{margin: 100px 0 30px calc(50% - 781px);width: 1400px;height: 780px;background: #882200 url("https://638183.freep.cn/638183/small/webp/bg01.webp") no-repeat center/cover;position: relative;z-index: 1;box-shadow: 3px 3px 6px gray;overflow: hidden;--state:running;font-family: "Ma Shan Zheng", "SimHei", "Arial", sans-serif;perspective:800px;--bg1:url("http://cccimg.com/view.php/2f019a9bf3fc827da46b9d109c3c8960.gif") no-repeat center/cover;--bg2:url("https://pic1.imgdb.cn/item/69ca536a9547e6ce4e3f619d.png") no-repeat center/cover;}
.title{position:absolute;margin:50px 0;left: calc(50%);transform: translateX(-50%);padding:10px;font-size:50px;font-weight:bold;z-index: 10;font-family:"Ma Shan Zheng","SimHei",sans-serif;color:#fff;text-shadow:0 0 5px #fff,0 0 10px #ff8da1,0 0 20px #ff5c7a,0 0 40px #ff2d55,0 0 70px #ff0f33,0 0 90px #ff0022;animation:neonFlicker 3s infinite alternate;}
@keyframes neonFlicker{0%,18%,22%,30%,35%,50%,58%,62%,100%{opacity:1;}20%,25%,32%,55%,60%{opacity:0.7;}}
#carousel-left{position: absolute;top: 20%;left: 8%;width:400px;height:420px;overflow:hidden;transform: perspective(500px) rotateY(25deg) translateX(-18px);}
#carousel-right{position: absolute;top: 20%;right: 7%;width:400px;height:420px;overflow:hidden;transform: perspective(500px) rotateY(155deg) translateX(0px);}
#photos img, #photoss img{float: right;width: 400px;height: 420px;position: relative;left: 0;top: 0;}
#photos, #photoss{position: absolute;width: 1000%;animation: animate 20s linear infinite;}
@keyframes animate{0%, 10%{right: 0;}15%, 20%{right: -100%;}25%, 30%{right: -200%;}35%, 40%{right: -300%;}45%, 50%{right: -400%;}55%, 60%{right: -500%;}65%, 70%{right: -600%;}75%, 80%{right: -700%;}85%, 90%{right: -800%;}95%, 100%{right: -900%;}}
#vid{position: absolute;left: 0;bottom: 0;width: 100%;height: calc(100% + 70px);object-fit: cover;pointer-events: none;z-index: -1;}
#fullscreen{position:absolute;bottom:30px;right:30px;font:normal 1.5em 楷体;color:#fff;text-shadow:0 0 3px #000;opacity:1;cursor: pointer;pointer-events: auto;opacity: 0;z-index:15;}
#fullscreen:hover{font-style:italic;}
#papa:hover #fullscreen{opacity: 0.9; }
#msvg{position: absolute;top:23%;left:calc(50% - 205px);width: 400px;height:400px;cursor: pointer;pointer-events: auto;border-radius: 50%;z-index:18;transform-style: preserve-3d;transform: rotateX(-15deg) rotateY(-15deg) rotateZ(0deg);transition: transform 0.3s ease;animation: starfish-rotate 3s linear infinite var(--state);transform-origin: center center 20px;}
@keyframes starfish-rotate{to {transform: rotateX(-15deg) rotateY(-15deg) rotateZ(360deg);}}
#msvg:hover{filter: drop-shadow(0 0 80px Gold);stroke-dasharray: 4;stroke-dashoffset: 0;transition: 1s;animation: flash 6s linear infinite var(--state); }
@keyframes flash{to { stroke-dashoffset: 160; }}
.lrcShow{position: absolute;bottom: 70px;left:calc(50% );transform:translateX(-50%);text-align: center;color: transparent;filter: drop-shadow(0px 0px 6px #FFF000) drop-shadow(0px 0px 6px #FF0000) drop-shadow(0px 0px 6px #00FFFF);letter-spacing: 2px;--aniName: bgMove1;--durTime: 1ms;--aniPlayState: running;font: 华文楷体, sans-serif;font: bold 3rem/1.5 "Ma Shan Zheng","SimHei","华文行楷","华文新魏","Microsoft YaHei",Arial,"sans-serif";color:#8A2BE2;white-space:pre;z-index: 20;}
.lrcShow::before{position: absolute;content: attr(data-lrc);width: 0%;height: 100%;left: 0;top: 0;color: transparent;background: var(--bg1);-webkit-background-clip: text;filter: drop-shadow(#000000 1px 0 0) drop-shadow(#000000 0 1px 0) drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px 0) hue-rotate(0deg) contrast(120%) brightness(200%);overflow: hidden;white-space: nowrap;animation: var(--aniName) var(--durTime) linear forwards;animation-play-state: var(--aniPlayState);}
@keyframes bgMove1{from { width: 0%; }to { width: 100%; }}
@keyframes bgMove0{from { width: 0%; }to { width: 100%; }}
#mplayer{position:absolute;text-align:center;top:95%;transform:translate(-50%);left:50%;z-index:60;color:#FF1493;}
#mplayer::before{position:absolute;content:attr(data-tt);left:0;bottom:25px;width:100%;text-align-last:justify;}
#mprog{width:600px;height:2px;accent-color:darkgreen;outline:none;cursor:pointer;}
</style>
</head>
<body>
<div id="papa">
<div class="title">桃花红杏花白</div>
<span id="fullscreen">全屏欣赏</span>
<div id="mplayer" data-tt="00:00 00:00">
<input id="mprog" type="range" min="0" max="100" step="any" value="0" title="调节进度"/></div>
<div class="lrcShow" data-lrc=''></div>
<svg id="msvg" width="400" height="400" viewBox="-200 -200 400 400"> <title id="svg-title">播放</title></svg>
<video id = "vid" src="https://video-qn.51miz.com/preview/video/00/00/14/47/V-144780-F36A2720.mp4" autoplay loop preload="auto" playsinline muted></video>
<div id="carousel-left">
<div id="photos">
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJftMGxc2ltjDdKENicKoMyjVdTLA2Hq6zrxOia1caPtfHlwMgsMNPtSrKDhBLicop2mtiaiakC4oETOw/640" />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJftMGxc2ltjDdKENicKoMyjkK6JI47RWiaQGmE3qdAwuXibMIyribpICAl3WicIfSQf3ZA4Zicn2jIUGA/640" />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJftMGxc2ltjDdKENicKoMyXqyjKG12ACBFXuY7AAqq9KamVHkM26E0lhRdfjKKp8CzK3TP9uHphw/640" />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJftMGxc2ltjDdKENicKoMyiczvPeBZXAEtwIHicN5HXbqia5v5Z8Xz8l4icZZHPora3to9FNnGLUt0OQ/640" />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJftMGxc2ltjDdKENicKoMy7icvqfYficLr6dpu0eKYAtRNu4aAwFspgcsLiaTTGwbWzLZl7nYW0iajOw/640" />
<img src="https://pic1.imgdb.cn/item/69ce1dbde348c042e1782213.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce1dbee348c042e1782214.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce1dbee348c042e1782215.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce1dbde348c042e1782211.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce1dbde348c042e1782210.jpg" />
</div>
</div>
<div id="carousel-right">
<div id="photoss">
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJftMGxc2ltjDdKENicKoMyjVdTLA2Hq6zrxOia1caPtfHlwMgsMNPtSrKDhBLicop2mtiaiakC4oETOw/640" />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJftMGxc2ltjDdKENicKoMyjkK6JI47RWiaQGmE3qdAwuXibMIyribpICAl3WicIfSQf3ZA4Zicn2jIUGA/640" />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJftMGxc2ltjDdKENicKoMyXqyjKG12ACBFXuY7AAqq9KamVHkM26E0lhRdfjKKp8CzK3TP9uHphw/640" />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJftMGxc2ltjDdKENicKoMyiczvPeBZXAEtwIHicN5HXbqia5v5Z8Xz8l4icZZHPora3to9FNnGLUt0OQ/640" />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJftMGxc2ltjDdKENicKoMy7icvqfYficLr6dpu0eKYAtRNu4aAwFspgcsLiaTTGwbWzLZl7nYW0iajOw/640" />
<img src="https://pic1.imgdb.cn/item/69ce1dbde348c042e1782213.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce1dbee348c042e1782214.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce1dbee348c042e1782215.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce1dbde348c042e1782211.jpg" />
<img src="https://pic1.imgdb.cn/item/69ce1dbde348c042e1782210.jpg" />
</div>
</div>
</div>
<audio id="aud" src="https://www.joy127.com/url/147357.mp3" autoplay loop preload="auto" playsinline></audio>
<script>
const aud=document.getElementById('aud');
const msvg=document.getElementById('msvg');
const title=document.querySelector('.title');
const vid=document.getElementById('vid');
const photos=document.getElementById('photos');
const photoss=document.getElementById('photoss');
msvg.onclick = () => aud.paused ? aud.play() : aud.pause();
const mState = () => {
papa.style.setProperty('--state', aud.paused ? 'paused': 'running');
document.getElementById("svg-title").textContent =aud.paused ?'播放':'暂停' ;
const state = aud.paused ? 'paused' : 'running';
photos.style.animationPlayState = state;
photoss.style.animationPlayState = state;
title.style.animationPlayState = state;
aud.paused ? vid.pause():vid.play();
const bg1 = getComputedStyle(papa).getPropertyValue('--bg1');
const bg2 = getComputedStyle(papa).getPropertyValue('--bg2');
papa.style.setProperty('--bg1', aud.paused ? bg1 : bg2);
};
aud.addEventListener('play', mState);
aud.addEventListener('pause', mState);
const lrcShow = document.querySelector('.lrcShow');
const lrcText = `桃花红杏花白 - 郭涛\n桃花来你就红来\n杏花来你就白\n漫山遍野向阳开呀\n啊个呀呀呆\n翻过那桃花岭来\n淌过哪杏花海\n憨憨地哥哥他看花来呀\n啊个呀呀呆\n桃花来你就红来\n杏花来你就白\n漫山遍野向阳开呀\n啊格呀呀呆\n翻过那桃花岭来\n淌过那杏花海\n憨憨的哥哥他看花来呀\n啊格呀呀呆\n花丛里小阿妹\n摘一朵山花戴\n女儿好风采\n啊格呀呀呆\n唱一曲开花调扔过崖\n声声落在哥心怀\n亲呀亲呀个呆呀个呆\n开花调唱的山花花开\n忘不了春来把树栽\n等到桃杏满枝头\n迎春的锣鼓咚咚咚咚敲起来\n咱把那新房山坡坡盖\n桃花杏花窗前前开\n亲呀亲呀个呆呀个呆\n啊……啊……啊……\n啊个呀呀呆\n啊个呀呀呆`;
let fs = true;
fullscreen.onclick = () => {
if (fs) {
fullscreen.innerText = '退出全屏';
papa.requestFullscreen();
} else {
fullscreen.innerText = '全屏欣赏';
document.exitFullscreen();
}
fs = !fs;
};
function createPlayer() {const papa = document.getElementById('papa');}
const audio = document.getElementById('aud');
const mplayer = document.getElementById('mplayer');
const mprog = document.getElementById('mprog');
var mseek = false;
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;
}
audio.addEventListener('loadedmetadata', () => {
mplayer.dataset.tt = toMin(0) + ' ' + toMin(audio.duration);
});
audio.addEventListener('timeupdate', () => {
if(!audio.duration) return;
if(!mseek) mprog.value = (audio.currentTime / audio.duration) * 100;
mplayer.dataset.tt = toMin(audio.currentTime) + ' ' + toMin(audio.duration);
});
mprog.onmousedown = () => mseek = true;
mprog.onmouseup = () => mseek = false;
mprog.onchange = () => {
if(!audio.duration) return;
audio.currentTime = (mprog.value / 100) * audio.duration;
lrcPlayer.idx = 0;
for(let line of lrcPlayer.gclines){
line.innerHTML = "\u3000";
}
};
mprog.oninput = () => {
if(!audio.duration) return;
let currentTime = (mprog.value / 100) * audio.duration;
mplayer.dataset.tt = toMin(currentTime) + ' ' + toMin(audio.duration);
lrcPlayer.idx = 0;
for(let line of lrcPlayer.gclines){
line.innerHTML = "\u3000";
}
};
class LrcPlayerY {
constructor(opts) {
this.lrcShowObj = document.querySelector('.lrcShow');
this.lrcVec = this.handleLrc(opts.lrcTxt);
this.mObj = document.getElementById('aud');
this.idx = 0;
this.setupListeners();
}
handleLrc(lyricTxt) {
const lines = lyricTxt.trim().split(/\r|\n|\r\n/);
const lrcs = [];
for (const line of lines) {
const timeTags = line.match(/\[\d{1,2}:\d{2}(?:\.\d{1,3})?\]/g);
if (timeTags) {
const text = line.replace(/\[.+?\]/g, '').trim();
timeTags.forEach(tag => {
const [, minutes, seconds] = tag.match(/\[(\d+):(\d+(?:\.\d+)?)\]/);
const time = parseFloat(minutes) * 60 + parseFloat(seconds);
lrcs.push({ time, text });
});
}
}
return lrcs.sort((a, b) => a.time - b.time);
}
showLrc(duration) {
this.lrcShowObj.style.setProperty('--aniPlayState', 'paused');
this.lrcShowObj.style.setProperty('--durTime', '0ms');
this.lrcShowObj.textContent = this.lrcVec.text;
this.lrcShowObj.dataset.lrc = this.lrcVec.text;
void this.lrcShowObj.offsetWidth;
this.lrcShowObj.style.setProperty('--aniName', 'bgMove' + (this.idx % 2));
this.lrcShowObj.style.setProperty('--durTime', `${duration}ms`);
this.lrcShowObj.style.setProperty('--aniPlayState', this.mObj.paused ? 'paused' : 'running');
}
setupListeners() {
const updateLyrics = () => {
const currentTime = this.mObj.currentTime;
if (this.idx >= this.lrcVec.length || currentTime < this.lrcVec.time) {
this.idx = 0;
}
while (this.idx < this.lrcVec.length - 1 && currentTime >= this.lrcVec.time) {
this.idx++;
}
if (currentTime >= this.lrcVec.time) {
const nextTime = this.idx < this.lrcVec.length - 1 ? this.lrcVec.time : this.mObj.duration;
const displayTime = Math.max((nextTime - this.lrcVec.time) * 1000, 100);
this.showLrc(displayTime);
}
};
this.mObj.addEventListener('timeupdate', updateLyrics.bind(this));
this.mObj.addEventListener('play', () => {
this.lrcShowObj.style.setProperty('--aniPlayState', 'running');
});
this.mObj.addEventListener('pause', () => {
this.lrcShowObj.style.setProperty('--aniPlayState', 'paused');
});
this.mObj.addEventListener('ended', () => {
this.idx = 0;
});
}
}
window.onload = function() {
createPlayer();
new LrcPlayerY({lrcTxt: lrcText});
};
['contextmenu', 'dragstart','selectstart'].forEach(type => document.getElementById('papa').addEventListener(type, e => e.preventDefault()));
msvg.onanimationiteration = () => msvg.style.setProperty('filter', `hue-rotate(${0 + Math.random() * 270}deg)`);
</script>
<script type="module">
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr(msvg);
dr.gradient('linearGradient', {id: 'grd',x1: 0, x2:0, y1: 0, y2: 1}, [['yellow',0],['orange',0.5],['gold',1]]);
dr.polygon('0 0,-25 -120,0 -90,25 -120,0 0', 'none', 'url(#grd)', 4).rotates(10);
dr.circle(0, 0, 125, 'none', 'url(#grd)', 4);
dr.circle(0, 0, 10, '#FF1493', 'url(#grd)', 1);
</script>
</body>
</html>

杨帆发表于 2026-4-2 12:08

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

也曾年轻 发表于 2026-4-2 13:09

https://n.sinaimg.cn/translate/w320h320/20180101/M0b8-fyqefvw8221273.gif

杨帆发表于 2026-4-2 13:17

也曾年轻发表于 2026-4-2 13:09

谢谢鼓励，谢谢您的美图，祝老师沐浴春光开心天天{:4_180:}

霜染枫丹 发表于 2026-4-2 14:41

民歌听着就是悦耳，特别舒畅！欣赏扬帆的精美制作，画面很有特色，赞佩！！{:4_204:}{:4_190:}

红影发表于 2026-4-2 16:10

杨帆对代码做了改进，真棒。
小播也特别漂亮。欣赏杨帆好帖{:4_199:}

杨帆发表于 2026-4-2 20:21

霜染枫丹发表于 2026-4-2 14:41
民歌听着就是悦耳，特别舒畅！欣赏扬帆的精美制作，画面很有特色，赞佩！！

是，民歌另有味道~谢谢枫丹老师鼓励，祝沐浴春光开心天天{:4_187:}

杨帆发表于 2026-4-2 20:25

红影发表于 2026-4-2 16:10
杨帆对代码做了改进，真棒。
小播也特别漂亮。欣赏杨帆好帖

小播代码来自马老师作品呦，谢谢马老师示范，谢谢影子鼓励{:4_187:}

红影发表于 2026-4-2 21:58

杨帆发表于 2026-4-2 20:25
小播代码来自马老师作品呦，谢谢马老师示范，谢谢影子鼓励

这个也是马老师前面弄的，杨帆有心了，还留着{:4_204:}

杨帆发表于 2026-4-2 22:38

本帖最后由杨帆于 2026-4-3 11:48 编辑

红影发表于 2026-4-2 21:58
这个也是马老师前面弄的，杨帆有心了，还留着
是，马老师的宝藏真多{:4_199:}

偶然~ 发表于 2026-4-3 14:30

来欣赏杨帆老师精品佳作！

偶然~ 发表于 2026-4-3 14:30

制作大气！

偶然~ 发表于 2026-4-3 14:30

太棒了！玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然献花给你啦】

偶然~ 发表于 2026-4-3 14:30

期待杨帆老师佳作频出！

偶然~ 发表于 2026-4-3 14:30

感谢杨帆老师带来的精彩，辛苦了！祝您和家人岁岁安康，幸福吉祥！

杨帆发表于 2026-4-3 15:46

偶然~ 发表于 2026-4-3 14:30
来欣赏杨帆老师精品佳作！

问好偶然~兄弟，谢谢鼓励，祝春天快乐{:4_191:}

偶然~ 发表于 2026-4-3 17:39

杨帆发表于 2026-4-3 15:46
问好偶然~兄弟，谢谢鼓励，祝春天快乐

愿杨帆老师：
十全十美，诸事顺遂，前程似锦，步步登高，财源广进，幸福绵长，平安喜乐，福满乾坤

红影发表于 2026-4-4 13:16

杨帆发表于 2026-4-2 22:38
是，马老师的宝藏真多

我们大家都跟着受益呢{:4_204:}

杨帆发表于 2026-4-4 15:27

红影发表于 2026-4-4 13:16
我们大家都跟着受益呢

是，马黑黑老师德艺双馨，无私奉献，大师风范，福泽大众，功德无量{:4_190:}

红影发表于 2026-4-5 19:47

杨帆发表于 2026-4-4 15:27
是，马黑黑老师德艺双馨，无私奉献，大师风范，福泽大众，功德无量

有马老师在，是我们大家的幸运呢{:4_204:}

页: [1]

花潮论坛's Archiver

桃花红杏花白