沁园春·长沙
本帖最后由 杨帆 于 2025-3-22 22:02 编辑 <br /><br /><style>#papa { margin: 80px 0 20px calc(50% - 670px); background:url('https://cccimg.com/view.php/f3aec8e46568ef105ec71e26c5c72564.jpg') no-repeat center/cover;width: 1286px; height: 720px; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index:2; position: relative; display: grid; place-items: center; --state: running; --showbackface: visible;}
#mboard { width: 420px; height: 40px; background:Snow; border-radius: 8px; box-shadow: 2px 2px 4px rgba(0,0,0,.5); display: flex; justify-content: center; align-items: center; gap: 8px; position:relative; opacity: 0; }
#papa:hover #mboard{ transition: .7s; opacity: .9; }
#mboard img { width: 26px; cursor: pointer; }
#mplayer img { filter: invert(.8); }
#mboard img:hover { filter: drop-shadow(1px 1px 1px rgba(0,0,0,.5)); }
#tMsg1, #tMsg2 { width: 45px; font-size: 13px; text-align: center; }
#volwrap { position: absolute; width: 60px; height: 40px; right: 45px; display: grid; place-items: center; background: none; }
#volwrap:hover #volume {
opacity: 1;
transform: rotate(270deg);
}
#volume {
position: absolute;
top: 0;
left: 15px;
width: 50px;
height: 4px;
opacity: 0;
transition: .5s;
transform-origin: 0 50%;
transform: rotate(180deg);
}
#btnMute:hover ~ #volwrap > #volume { display: inline; }
#prog { --track: gray; --prog: red; --prg: 0%; width: 200px; height: 20px; cursor: pointer; background: linear-gradient(to right, var(--prog) var(--prg), var(--track) 0) no-repeat 0% 50%/100% 2px; }
#dt{
position:absolute;mix-blend-mode: screen;
width: 100%;
height: 100%;
top:0%;
left: 0%; z-index: 1; }
#dt img{width: 100%;
height: 100%;
}
#vid {width: 100%; height: 120%;
position:absolute;
top:-20%; left:0%;
object-fit: cover; pointer-events: none;mix-blend-mode:soft-light; -webkit-mask: radial-gradient(transparent 30%, red);
}
#bfq{height: 40px;position:absolute;left: 40%; bottom:5%;overflow: hidden; z-index:8;}
.dDiv { position: absolute;
color:transparent;
font:400 2.8em/1em 华文隶书;
font-weight:bold;
top:20%;right:5%;
writing-mode:vertical-rl;
pointer-events: auto;
}
.sp { animation:iFlash 5s linear infinite var(--state); }
.dDiv span:nth-child(1) { animation-delay:0s; }
.dDiv span:nth-child(2) { animation-delay:0.4s; }
.dDiv span:nth-child(3) { animation-delay:0.8s; }
.dDiv span:nth-child(4) { animation-delay:1.2s; }
.dDiv span:nth-child(5) { animation-delay:1.6s; }
.dDiv span:nth-child(6) { animation-delay:2s; }
.dDiv span:nth-child(7) { animation-delay:2.4s; }
.dDiv span:nth-child(8) { animation-delay:2.8s; }
.dDiv span:nth-child(9) { animation-delay:3.2s; }
@keyframes iFlash {
0%,100% {
color:white;
text-shadow:
2px 2px 4px coral,
2px 2px 10px coral,
2px 2px 20px coral,
2px 2px 40px coral,
2px 2px 50px coral,
2px 2px 60px coral,
2px 2px 0px coral,
2px 2px 80px coral,
2px 2px 90px coral,
2px 2px 100px coral;
}
30%,90% {
color:transparent;
text-shadow:none;
}
}
.tit{
position: absolute;
width: 800px;
object-fit: cover;
z-index:2;
top:100px;
left: -13%;
background-image:url('https://pic.imgdb.cn/item/65fdabba9f345e8d03ec83d7.png');
background-size:cover;
font: bold 1.5em 华文行楷;
font-weight:666;
text-align:center;
line-height:45px;
color:white;
pointer-events: auto;
-webkit-background-clip:text;
}
#marquee{
height: 180px;
overflow: hidden;
}
#marquee > div {
text-align: center;
animation: marquee 60s linear infinite var(--state);
}
#marquee:hover>div{
animation-play-state:paused;
}
#marquee p{
height: 30px;
margin: 0;
}
@keyframes marquee {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(-100%);
}
}
li-zi { position: absolute; width: 100px; height: 1px; border-radius: 100% 20%;background:#ffffff;border-radius: 50%;animation: imov 2s infinitevar(--state);z-index: -1; opacity: .3; webkit-mask: radial-gradient(transparent 40%, red);
-webkit-mask: radial-gradient(transparent 40%, red);}
@keyframes moving {to{ opacity: 1; transform: translate(var(--x0),var(--y0)) rotate(var(--deg)); filter:hue-rotate(0deg);}from{ opacity: 0; transform: translate(0,0) rotate(var(--deg)); }}
</style>
<div id="papa">
<div class="dDiv">
<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 id="dt">
<img src="https://pic.imgdb.cn/item/644e2e6c0d2dde5777e7add9.gif" id="IMG" />
</div>
<div id="bfq">
<div id="mboard">
<img id="btnPlay" src="https://638183.freep.cn/638183/web/icon/play.svg" title="播放/暂停(Alt+X)" alt="" />
<span id="tMsg1">00:00</span>
<span id="prog"></span>
<span id="tMsg2">00:00</span>
<img id="btnMute" src="https://638183.freep.cn/638183/web/icon/unmuted.svg" title="静音 (Alt+J)" alt="" />
<div id="volwrap"><input id="volume" type="range" min="0" max="1" step="0.1" value="1" /></div>
</div>
</div>
<video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/08/40/5d21b610e8f58.mp4" autoplay loop muted></video>
<div id="marquee" >
<div class="tit">
<h3>沁园春·长沙<h3><br>
<h4>作者：毛泽东<h4><br><br>
独立寒秋，湘江北去，橘子洲头。<br>
看万山红遍，层林尽染；<br>漫江碧透，百舸争流。<br>
鹰击长空，鱼翔浅底，万类霜天竞自由。<br>
怅寥廓， 问苍茫大地，谁主沉浮？<br>
携来百侣曾游，忆往昔峥嵘岁月稠。<br>
恰同学少年，风华正茂；<br>书生意气，挥斥方遒。<br>
指点江山，激扬文字，粪土当年万户侯。<br>
曾记否，到中流击水，浪遏飞舟？<br>
<br></div>
</div>
</div>
<p><audio id="aud" src="https://cccimg.com/view.php/ee87a5f05d94ca37d2db2dfeb4c4007c.mp3" autoplay loop></audio></p>
<p> <audio id="aud1" src="https://cccimg.com/view.php/1d2233465e2d617cc8ca01c2f3eec6fb.mp3" autoplay loop></audio></p>
<script>
const marquee = document.getElementById('marquee');
const contents =marquee.innerHTML;
marquee.innerHTML = contents + contents;
var lastVolume = 1, muted = false;
var imgAr = [
'https://638183.freep.cn/638183/web/icon/play.svg',
'https://638183.freep.cn/638183/web/icon/pause.svg',
'https://638183.freep.cn/638183/web/icon/unmuted.svg',
'https://638183.freep.cn/638183/web/icon/muted.svg',
];
var setVolume = (val) => Math.min(1, Math.max(0, val));
var setMute = () => {
if(lastVolume === 0) return;
muted = !muted;
muted ? (aud1.volume = aud.volume = 0, btnMute.src = imgAr) : (aud.volume = aud1.volume = lastVolume, btnMute.src = imgAr);
};
var s2m = (seconds) => {
const secs = Math.floor(seconds || 0);
return `${String(secs/60|0).padStart(2,'0')}:${String(secs%60).padStart(2,'0')}`;
};
var mState = () => {
btnPlay.src = aud.paused ? imgAr : imgAr;
btnPlay.title = (aud.paused ? '播放' : '暂停') + ' (Alt+X)';
};
document.addEventListener('keydown', e => {
if(!e.altKey) return;
switch (e.keyCode) {
case 88:
btnPlay.click();
break;
case 74:
setMute();
break;
case 187: case 107:
aud.volume = setVolume(aud.volume + 0.1);
lastVolume = aud.volume;
break;
case 189: case 109:
aud.volume = setVolume(aud.volume - 0.1);
lastVolume = aud.volume;
break;
default:
return;
}
});
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
prog.style.setProperty('--prg', aud.currentTime/aud.duration*100 +'%');
tMsg1.innerText = s2m(aud.currentTime);
tMsg2.innerText = s2m(aud.duration);
};
aud.onvolumechange = () => {
btnMute.src = aud.volume === 0 ? imgAr : imgAr;
volume.value = aud.volume;
}
btnPlay.onclick = () => aud.paused ? (aud.play(),image.play(),aud1.play(),vid.play()): (aud.pause(),image.stop(),aud1.pause(),vid.pause());
btnMute.onclick = () => setMute();
volume.onchange = () => aud.volume = lastVolume = volume.value;
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
prog.onmousemove = (e) => prog.title = s2m(e.offsetX * aud.duration / prog.offsetWidth);
volwrap.onmouseover = () => volwrap.title = '音量 : ' + volume.value + ' (Alt++/-)'
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
// 洢canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
//
image.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 image= document.getElementById("IMG");
</script>
<script>
(function() {
let all = 200;
for(let i = 0; i < all; i++) {
let movBall = document.createElement('li-zi');
let hudu = Math.PI / 180 * 360 / all * i;
let xx = 600 * Math.cos(hudu), yy = 600 * Math.sin(hudu);
movBall.style.cssText += `
--x0: ${xx}px;
--y0: ${yy}px;
--deg: ${360 / all * i}deg;
background: #${Math.random().toString(16).substr(-6)};
animation: moving ${Math.random() * 2 + 2}s -${Math.random() * 2}s infinite var(--state);`;
papa.prepend(movBall);}
let mState = () => {
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
};
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
player.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script> 坐少发欣赏精美制作，融合了多种代码，厉害！{:4_199:} 缅怀伟人！ 梦江南 发表于 2025-2-26 16:40
坐少发欣赏精美制作，融合了多种代码，厉害！
谢谢梦江南友友支持与鼓励，祝开心{:4_204:} https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 起个网名好难 发表于 2025-2-26 17:31
谢谢难难老师鼓励！请老师有空时看看，组合键 alt+x 暂停有效，为何组合键 alt+j 静音只对一个音乐有效呢？ 杨帆 发表于 2025-2-26 19:52
谢谢难难老师鼓励！请老师有空时看看，组合键 alt+x 暂停有效，为何组合键 alt+j 静音只对一个音乐有效呢 ...
原来朗诵和音乐是不同的吧，感觉朗诵声音有点低了{:4_173:} 毛主席的诗词非常大气，很符合伟人的气质。读来令人感觉振奋{:4_199:} 这个制作融合了那么多效果，很赞{:4_187:} 主席的诗词总是那么豪迈 本帖最后由 杨帆 于 2025-3-27 13:21 编辑
红影 发表于 2025-2-26 20:00
原来朗诵和音乐是不同的吧，感觉朗诵声音有点低了
是，还不会调高呢{:4_173:} 杨帆 发表于 2025-2-26 19:52
谢谢难难老师鼓励！请老师有空时看看，组合键 alt+x 暂停有效，为何组合键 alt+j 静音只对一个音乐有效呢 ...
不了解具体思路，这还是请教原作者的好。 绿叶清舟 发表于 2025-2-26 20:13
主席的诗词总是那么豪迈
是啊，重温主席诗词，缅怀一代伟人——共和国缔造者毛泽东! 起个网名好难 发表于 2025-2-26 20:30
不了解具体思路，这还是请教原作者的好。
好的，谢谢难难老师{:4_190:} 杨帆 发表于 2025-2-26 20:35
好的，谢谢难难老师
没帮上忙，抱歉 起个网名好难 发表于 2025-2-26 20:35
没帮上忙，抱歉
老师您对我帮助太多太大了，由衷感谢{:4_176:} 杨帆 发表于 2025-2-26 20:42
老师您对我帮助太多太大了，由衷感谢
粗略的看了下代码，其中有
var setMute = () => {
if(lastVolume === 0) return;
muted = !muted;
muted ? (aud.volume = 0, btnMute.src = imgAr) : (aud.volume = lastVolume, btnMute.src = imgAr);
};本来就是只对一个音频（aud）进行控制，如果一定要同时控制两个音频（aud ， aud1）可以这样试试
var setMute = () => {
if(lastVolume === 0) return;
muted = !muted;
muted ? (aud1.volume = aud.volume = 0, btnMute.src = imgAr) : (aud.volume = aud1.volume = lastVolume, btnMute.src = imgAr);
};不建议这么做，因为同时有两个（或多个）声音会互相干扰以致都听不清楚。
起个网名好难 发表于 2025-2-26 20:53
粗略的看了下代码，其中有
本来就是只对一个音频（aud）进行控制，如果一定要同时控制两个音频（aud ，...
辛苦老师您了，我学习一下，谢谢{:4_191:}
呵呵，同时控制两个音频也是无奈之举，没找到配乐朗诵文件，也不会将朗诵、伴奏音频整合成一个音乐文件。 杨帆 发表于 2025-2-26 21:13
辛苦老师您了，我学习一下，谢谢
呵呵，同时控制两个音频也是无奈之举，没找到配乐朗诵文件 ...
那恐怕得大改动， 因为那代码并未考虑多个音频同时播放得情况。
另外朗诵要加大音量而背景音乐这要降低音量才好。 起个网名好难 发表于 2025-2-26 21:30
那恐怕得大改动， 因为那代码并未考虑多个音频同时播放得情况。
另外朗诵要加大音量而背景音乐这要降 ...
是，这个于我太难了，好在同暂停的问题亚伦老师帮助解决了，同静音的问题您也帮助解决了，基本完美！
至于加大朗诵音量，降低背景音乐音量，还无从下手……
总之，太厉害了！为您和亚伦老师点赞！{:4_199:}{:4_199:}{:4_199:}
页:
[1]
2