查看: 1459|回复: 74

[单图] 【黑师代码】光亮(贺令狐冲升版)

[复制链接]
发表于 2024-3-22 19:11 | 显示全部楼层 |阅读模式
本帖最后由 花简静 于 2024-3-23 21:15 编辑

评分

9

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-3-22 19:11 | 显示全部楼层
点评
回复

使用道具

 楼主| 发表于 2024-3-22 19:11 | 显示全部楼层
本帖最后由 花简静 于 2024-3-23 22:29 编辑

<style>
        #papa { margin: 130px 0 20px calc(50% - 931px); width: 1700px; height: 900px; background: url('https://pic.imgdb.cn/item/65fed57a9f345e8d03124ff1.webp') no-repeat center/cover; box-shadow: 3px 3px 6px gray; overflow: hidden; position: relative; }
        #canv { position: absolute; left: 18%; bottom: 4px; transform: translate(-50%,0); cursor: pointer; }
        .pic { position: absolute; width: 240px; mix-blend-mode: screen; offset-path: path('M1724,-80 Q1550,-20 -100,360'); 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://yinpin.s3-us-east-1.ossfiles.com/qihang.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>


红色代码是飞鸟,不想要飞鸟的可以删除掉
点评
回复

使用道具

 楼主| 发表于 2024-3-22 19:13 | 显示全部楼层
@令狐冲
得知你挂版的消息真是太开心啦。。。
十分喜欢你的作品,大气又独特
今后快乐相伴,一起玩图哈。。

评分

2

查看全部评分

点评
回复

使用道具

发表于 2024-3-22 19:18 | 显示全部楼层
先占个位。。。
点评
回复

使用道具

发表于 2024-3-22 19:20 | 显示全部楼层
首先感谢静斑的赠帖
再来慢慢欣赏。。。
点评
回复

使用道具

发表于 2024-3-22 19:27 | 显示全部楼层
素描般的一幅美画
窗外的光溶入肤肌
掬一支花香
点亮心房
很美
谢谢。。。

评分

1

查看全部评分

点评
回复

使用道具

发表于 2024-3-22 19:28 | 显示全部楼层
花简静 发表于 2024-3-22 19:13
@令狐冲
得知你挂版的消息真是太开心啦。。。
十分喜欢你的作品,大气又独特

哈哈
以后一起玩。。。
点评
回复

使用道具

发表于 2024-3-22 19:42 | 显示全部楼层
哇,静静的图是真漂亮,磨砂的感觉,特有味道。
点评
回复

使用道具

发表于 2024-3-22 19:42 | 显示全部楼层
令狐大侠收礼手软了没?哈哈
点评
回复

使用道具

您需要登录后才可以回帖 登录 | 中文注册

本版积分规则

手机版|千山论坛 ( 冀ICP备2024055714号 )

GMT+8, 2025-6-10 08:53

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表