我的九寨 - 学习马老师帖《大雅无曲》代码
本帖最后由 杨帆 于 2025-8-31 23:05 编辑 <br /><br /><!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>《我的九寨》- 乌兰托娅</title>
</head>
<body>
<style>
#papa {margin: 80px 0px;
width: 1400px;
height: 90vh; left: calc(50% - 81px); transform: translateX(-50%);
background: url("https://upfile.mp3.wf/view.php/58888561d6d0aa44ec6d047bdb414808.jpg") no-repeat center/cover; user-select: none; background-blend-mode-select: none; background-blend-mode: DeepSkyBlue; box-shadow: 0px 0px 0px 2px #fff, 0px 0px 0px 4px #fff; overflow: hidden; position: relative; display: grid; place-items: center; background-blend-mode: darken; --ma-size: 400px; --state: running; z-index: 1; }
#papa::before { position: absolute; content: url('https://pic1.imgdb.cn/item/6850355758cb8da5c851dd59.webp'); scale: 0.3; opacity: 0;transition: 1.8s; display:var(--display); }
#papa:hover::before { opacity: 1; scale: 1; }
#pic { position: absolute;width: 100%; height: 100%; opacity: .8; top: 0px; left: 0px; z-index: 1; mix-blend-mode: screen; }
#pic img { height: 100%; width: 100%; }
#ma { position: absolute; right: -4%; bottom: -13%; aspect-ratio: 1/1; width: var(--ma-size); cursor: pointer; pointer-events: auto; z-index: 10;background:repeating-conic-gradient(yellow, gold, lightgreen 10%),url('https://pic.imgdb.cn/item/66483855d9c307b7e951b66a.gif'); background-blend-mode: screen; clip-path: path('M310.29249,52.84883l0,28.29044c-59.18432,3.98935 -105.79996,46.09556 -105.79999,97.44484c0,-9.25414 12.88002,-16.76469 28.75,-16.76469c15.86998,0 28.75,7.51055 28.75,16.76469c0,-9.25414 12.88002,-16.76469 28.75,-16.76469c7.5579,0 14.41662,1.75651 19.54999,4.54044l0,137.95953c0,6.16947 -4.12158,11.17649 -9.19999,11.17649c-5.07838,0 -9.2,-5.00702 -9.2,-11.17649l0,-5.58823l-18.4,0l0,5.58823c0,18.50822 12.36478,33.52942 27.6,33.52942c15.23518,0 27.60001,-15.02119 27.60001,-33.52942l0,-137.95953c5.13336,-2.78393 11.9921,-4.54044 19.54999,-4.54044c15.86998,0 28.75,7.51055 28.75,16.76469c0,-9.25414 12.88002,-16.76469 28.75,-16.76469c15.86998,0 28.75,7.51055 28.75,16.76469c0,-51.34931 -46.61564,-93.45549 -105.79999,-97.44484l0,-28.29044l-18.40002,0z'); opacity: .6; box-shadow: inset 0 0 20px 70px rgba(0,30,120,.25);scale: .5; }
#ma:hover { transform:scale(1.1);opacity: 1; }
#btnFs { position: absolute; left: 20px; top: 20px; padding: 6px; background: green; color: white; border: 2px solid white; border-radius: 8px; cursor: pointer; pointer-events: auto; z-index: 10; }
#vid1 { position: absolute; right: 5%; bottom: 15%; width: 100%; height: 50%; object-fit: cover; pointer-events: none; opacity: .9; 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); }
#vid2 { position: absolute; left: 0px; top: 0px; width: 100%; heightpx; width: 100%; height: 100%; mix-blend-mode: screen; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: .8; object-fit: cover; }
.lrc { width: 100%; height: 120px; overflow: hidden; display: block; position: absolute; top: 84%; left: 6%; z-index: 5; margin: 0 auto; }
.lrc #ullrc { width: 100%; padding: 0; list-style: none; transition: 0.3s all ease; margin: 0; }
.lrc #ullrc li { height: 70px; line-height: 60px; font-family: 华文隶书; font-size: 0px; color: #000078; font-weight: bold; transition: .8s all ease; list-style-type: none; text-align: center; display: block; width: 100%; margin: 0 auto; }
.lrc #ullrc li.active { font-size: 45px; text-align: center; color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen) 50%/100px 80px; -webkit-background-clip: text; filter: drop-shadow(#000 1px 0 0) drop-shadow(#000 0 1px 0) drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px 0); }
#dancer{position: absolute;mix-blend-mode: screen;width: 470px; height: 170px; left: 1%; bottom:2%; opacity:1; z-index: 8;cursor: pointer;display:var(--display);transition: .3s;}
</style>
<div id="papa" >
<svg id="bsvg" width="auto" height="auto">
<rect x="0" y="0" width="100%" height="100%" rx="8" ry="5" fill="none" stroke="#00BFFF" stroke-width="8" stroke-dasharray="8 4">
<animate attributeName="stroke-dashoffset" from="0" to="-48" dur="2s" begin="0s" repeatCount="indefinite"/>
</rect>
</svg>
<span id="btnFs"></span>
<div id="pic" ><img id="Img" src="https://pic.imgdb.cn/item/66bb6a3ed9c307b7e92f39d6.gif" alt="" /></div>
<div id ="ma" title="播放/暂停" ></div>
<video id="vid1" src="https://img.tukuppt.com/video_show/7165162/00/17/65/5ecb8f4ab37a1.mp4" autoplay loop muted></video>
<video id="vid2" src="https://bpic.588ku.com/video_listen/588ku_video/25/03/26/15/03/40/video67e3a6cc9b296.mp4" autoplay loop muted></video>
<img id="dancer" src="https://pic.imgdb.cn/item/64e89257661c6c8e54046ae2.gif" alt="" />
<div class="lrc">
<ul id="ullrc"></ul>
</div>
<audio id="aud" src="https://upfile.mp3.wf/view.php/6d19c23abe1c4ae0f02ca4b3ed05ac3f.mp3" loop autoplay></audio>
</div>
<script type="module">
import qp from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
qp.fs('papa','btnFs');
</script><script>
var mState = () => {
ma.style.setProperty('--state', aud.paused ? 'paused' : 'running');
papa.style.setProperty('--display', aud.paused ? 'none' : '');
aud.paused ? (vid1.pause(),vid2.pause(),image0.stop(),bsvg.pauseAnimations()) : (vid1.play(),vid2.play(),image0.play(), bsvg.unpauseAnimations());
dancer.title = '播放/暂停';
dancer.onclick = () => ma.click();
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
ma.onclick = () => aud.paused ? aud.play() : aud.pause();
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
// 移除存储的canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
// 透明度还原
image0.style.opacity = '';
}
if (this.storeUrl) {
this.src = this.storeUrl;
}
};
HTMLImageElement.prototype.stop = function() {
var canvas = document.createElement('canvas');
// 尺寸
var width = this.width, height = this.height;
if (width && height) {
// 存储之前的地址
if (!this.storeUrl) {
this.storeUrl = this.src;
}
// canvas大小
canvas.width = width;
canvas.height = height;
// 绘制图片帧（第一帧）
canvas.getContext('2d').drawImage(this, 0, 0, width, height);
// 重置当前图片
try {
this.src = canvas.toDataURL("image/gif");
} catch(e) {
// 跨域
this.removeAttribute('src');
// 载入canvas元素
canvas.style.position = 'absolute';
// 前面插入图片
this.parentElement.insertBefore(canvas, this);
// 隐藏原图
this.style.opacity = '0';
// 存储canvas
this.storeCanvas = canvas;
}
}
};
}
var image0 = document.getElementById("Img");
var lrc = `
我的九寨 - 乌兰托娅 (Wulan Tuoya)
梦里的云彩翻过了千山
轻轻落在日月轮回的家园
暖暖的阳光像花儿一样盛开
我的梦在你的 你的山下醒来
怀中的琴弦弹奏着天籁
悄悄解开恍若千年的等待
清清的泉水把我的心儿灌溉
你的美让我的 我的真情如海
人间最美 最美是故乡
啊 我的九寨
那山山水水
把我的时光记载
把我的时光记载
一生最爱 最爱是故乡
啊 我的九寨
我用一生来眷恋
你的模样你的爱
你的模样你的爱
怀中的琴弦弹奏着天籁
悄悄解开恍若千年的等待
清清的泉水把我的心儿灌溉
你的美让我的 我的真情如海
人间最美 最美是故乡
啊 我的九寨
那山山水水
把我的时光记载
把我的时光记载
一生最爱 最爱是故乡
啊 我的九寨
我用一生来眷恋
你的模样你的爱
你的模样你的爱
你的模样你的爱
`;
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 = 70, lrc_ul_height = 60;
var top = index * lrc_li_height + lrc_li_height / 3 - lrc_ul_height / 3;
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;
</script >
</body>
</html>
精彩，欣赏杨帆带来美的享受！{:4_187:} 多种代码的融合，制作出这么美的音画，杨帆厉害。{:4_199:} 漂亮！美的享受！ 这个把小猫咪换成过来飘落的动图，也挺不错。
小播也换了裁剪路径，得到不一样的阳伞图案。小播上的频谱小动图不是很明显。
还加入了歌词同步，真不错{:4_199:} 流动的蓝色边框很漂亮，跳舞小人也很不错。
欣赏杨帆好帖{:4_199:} 梦江南 发表于 2025-8-8 17:09
精彩，欣赏杨帆带来美的享受！
问好江南，谢谢鼓励，祝开心{:4_187:} 樵歌 发表于 2025-8-8 18:00
漂亮！美的享受！
问好樵歌，谢谢管理员鼓励，祝开心{:4_190:} 红影 发表于 2025-8-8 19:26
流动的蓝色边框很漂亮，跳舞小人也很不错。
欣赏杨帆好帖
问好影子，谢谢管理员鼓励，祝开心{:4_204:} 这抽象的画面给人无限的遐想。 梦油 发表于 2025-8-9 10:52
这抽象的画面给人无限的遐想。
问好梦油超版，谢谢鼓励，祝开心{:4_190:} 杨帆 发表于 2025-8-9 11:00
问好梦油超版，谢谢鼓励，祝开心
杨帆朋友别客气。 杨帆 发表于 2025-8-8 22:40
问好影子，谢谢管理员鼓励，祝开心
这么客气啊，应该学习杨帆的学习精神呢{:4_187:} 红影 发表于 2025-8-9 13:13
这么客气啊，应该学习杨帆的学习精神呢
互相学习，愉快生活{:4_187:} 杨帆 发表于 2025-8-9 16:19
互相学习，愉快生活
嗯嗯，享受学习的快乐{:4_187:}
页:
[1]