《最炫民族风》 - 凤凰传奇（学习黑黑老师三十里铺代码）
本帖最后由 亦是金 于 2025-1-11 10:57 编辑 <br /><br /><style>#papa { margin: 130px 0 20px calc(50% - 581px); width: 1200px; height: 700px; background: url('https://z4a.net/images/2023/12/27/122701.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px gray; overflow: hidden; position: relative; }
#canv { position: absolute; width: 1200px; height: 180px; left: 0%; bottom: 4px; transform: translate(0%,0); cursor: pointer; }
.pic { position: absolute; width: 240px; mix-blend-mode: screen; offset-path: path('M-224,150 Q1250,-20 1200,460'); offset-distance: 100%; animation: fly 20s var(--delay) infinite var(--state); --delay: 0s; }
.pic:nth-of-type(2) { --delay: -7s; }
.pic:nth-of-type(3) { --delay: -14s; }
@keyframes fly { to { offset-distance: 0; } }
#vid { position: absolute; width: 120%; height: 100%; object-fit: cover; pointer-events: none; mix-blend-mode: screen; z-index: 2; opacity: .52; transform: rotateY(180deg); }
</style>
<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/79/55/60c1c62b9766e.mp4" autoplay="" loop="" muted=""></video>
<img class="pic" src="https://638183.freep.cn/638183/t22/gif/bird1.gif" alt="" />
<img class="pic" src="https://638183.freep.cn/638183/t22/gif/bird1.gif" alt="" />
<img class="pic" src="https://638183.freep.cn/638183/t22/gif/bird1.gif" alt="" />
<canvas id="canv" width="600" height="240" title="点击播放"></canvas>
</div>
<script>
(function() {
let aud = new Audio();
aud.crossOrigin = '';
aud.src = 'https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/donting/CD1/dt0115.mp3';
aud.loop = true;
aud.load();
aud.play();
let AudioContext = window.AudioContext || window.webkitAudioContext;
let Ac = new AudioContext;
let analyser = Ac.createAnalyser();
analyser.fftSize = 256;
let source = Ac.createMediaElementSource(aud);
source.connect(analyser);
analyser.connect(Ac.destination);
let len = analyser.frequencyBinCount - 30;
let output = new Uint8Array(len);
let canvctx = canv.getContext('2d');
let ppWidth = canv.width / len;
let ppHeight, x;
let gradient = canvctx.createLinearGradient(0,0,0,200);
gradient.addColorStop(0,'rgba(255,165,0');
gradient.addColorStop(.5,'rgba(255,165,0');
gradient.addColorStop(1,'rgba(128,128,128');
(function draw() {
canvctx.clearRect(0, 0, canv.width, canv.height);
analyser.getByteFrequencyData(output);
x = 0.5;
for(let i = 0; i < len; i ++) {
ppHeight = output[ i ] * .9 + ppWidth;
canvctx.fillStyle = gradient;
canvctx.fillRect(x, canv.height - ppHeight, ppWidth - 1, ppHeight);
x += ppWidth;
}
requestAnimationFrame(draw);
})();
aud.onpause = aud.onplaying = () => aud.paused ?
(canv.title = '点击播放', papa.style.setProperty('--state', 'paused')) :
(canv.title = '点击暂停', papa.style.setProperty('--state', 'running'));
canv.onclick = () => aud.paused ? aud.play() : aud.pause();
papa.onclick = () => aud.paused ? (vid.pause(),vid.pause()) : (vid.play(),vid.play());
})();
</script>
亦是金 老师，我看到了熊猫办公，音乐也好听，看不到图，估计是我的浏览器又偷懒了……{:4_203:} 千羽 发表于 2024-3-23 08:42
亦是金 老师，我看到了熊猫办公，音乐也好听，看不到图，估计是我的浏览器又偷懒了……
问好！我这里正常的，你怎么看不见背景图呢？{:4_203:} 图美歌好，分享了。谢谢亦是金朋友。 千羽 发表于 2024-3-23 08:42
亦是金 老师，我看到了熊猫办公，音乐也好听，看不到图，估计是我的浏览器又偷懒了……
我第一次打开时也看不到图，第二次打开就看到图了。 梦油 发表于 2024-3-23 10:27
图美歌好，分享了。谢谢亦是金朋友。
问好梦油超版！{:4_180:} 梦油 发表于 2024-3-23 10:28
我第一次打开时也看不到图，第二次打开就看到图了。
谢谢告知！{:4_180:} 亦是金 发表于 2024-3-23 13:45
问好梦油超版！
不客气，亦是金朋友。 亦是金 发表于 2024-3-23 13:45
谢谢告知！
现在打开的很顺利。 梦油 发表于 2024-3-23 14:46
现在打开的很顺利。
梦油朋友晚上好！{:4_180:} 我这里打开顺利，怎么评分后就有二个声音了 亦是金 发表于 2024-3-23 19:38
梦油朋友晚上好！
你好，亦是金朋友。 漂亮，亦是金老师调整了鸟儿的路径，选取的人物也很美{:4_199:}
我这里也是，评分后出现两个声音，还有画面没有居中。 老师这个频谱制作真漂亮，画面也是漂亮 感谢老师分享
页:
[1]