论坛 › 欢乐水吧 › 水墨醉江南

醉美水芙蓉 发表于 2024-2-12 20:55

水墨醉江南

本帖最后由 醉美水芙蓉 于 2024-2-12 21:08 编辑 <br /><br /> <style>
        #papa { margin: 0 0 0 calc(50% - 931px); width:1700px; height:980px;top:50px; border: 1px solid gray; background: url('https://pic.imgdb.cn/item/65ca17d39f345e8d03cac350.gif') no-repeat center/cover; box-shadow: 3px 6px 12px #000; z-index: 1; position: relative; display: grid; overflow: hidden; place-items: center; }
        #papa::before, #papa::after { position: absolute; content: ''; left: calc(50% - 220px); bottom:160px; width: 153px; height: 93px; background: url('https://pic.imgdb.cn/item/65a280e8871b83018aca187e.png') no-repeat center/cover; opacity: .9; animation: move 20s alternate infinite forwards; --xx: 20%; z-index: 3;}
        #papa::after { transform: scale(-1,1); width: 100px; height: 53px;bottom:220px; --xx: 65%; z-index: 2;}
        /* canvas画布不要在CSS中设定尺寸；用融合滤镜替代opacity滤镜，去掉黑色背景 */
        #canv { position: absolute; mix-blend-mode: screen; }
        #mypic1 { position: absolute; width: 360px;left: calc(90% - 30px); top: 120px;animation: fly 40s alternate infinite forwards; --xx: 0;z-index: 10;}
        #mypic2{ position: absolute; width: 360px;left: calc(10% - 160px); top: 240px;animation: fly 30s alternate infinite forwards; transform: scale(-1,1);--xx: 90%;z-index: 10;}
        @keyframes move { to { left: var(--xx); } }
        @keyframes fly { to { left: var(--xx); } }
</style>

<div id="papa">
        <!--canvas 画布尺寸的定义方法放在html代码中 -->
        <canvas id="canv" width="1700" height="900"></canvas>
        <span id="disc"></span>
        <span id="tit"></span>
        <img id="mypic1" src=" " alt="" />
        <img id="mypic2" src=" " alt="" />
</div>

<script>
let sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/api/ypPlayer.min.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);

sf.onload = () => {
        let player = new ypP();
        player.setAudSrc('https://www.qqmc.com/mp3/music6863587.mp3');
        player.setBtnCss(`
                width: 360px;
                bottom: 10px;
                z-index: 10;
                --btnBg: url('http://qhxy.52qingyin.cn/file/20240114140113_78607.svg') no-repeat center/cover;
                --trackBg: transparent;
                --progBg: RoyalBlue;
                --btnSize: 130px;
        `);
        player.setLrcCss(`top: 15px; color: rgba(65,105,225,.4); --bg: url('https://pic.imgdb.cn/item/65a3730c871b83018ab23f7a.gif'); opacity: .3; font-size: 2.0em;`);
        player.lrcAr= [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];


        /* canvas雨开始 ：加在插件 onload 事件中才能显示 */
        (function main() {
                let canv = document.getElementById('canv');
                let ctx = canv.getContext('2d');
                canv.width = canv.clientWidth;
                canv.height = canv.clientHeight;
                let dropList = [], linelist = [], mousePos = ;
                let gravity = 0.5, mouseDis = 35, lineNum = 20, speedx = 0, maxspeedx = 0;
                window.onmousemove = function (e) { mousePos = e.clientX - offset(papa).x; mousePos = e.clientY - offset(papa).y; maxspeedx = (e.clientX - canv.clientWidth / 2) / (canv.clientWidth / 2); }
                function createLine(e) { let temp = 0.25 * (50 + Math.random() * 100); let line = { speed: 5.5 * (Math.random() * 6 + 3), die: false, posx: e, posy: -50, h: temp, corlor: '#eee' }; linelist.push(line); }
                function createDrop(x, y) { let drop = { die: false, posx: x, posy: y, vx: (Math.random() - 0.5) * 8, vy: Math.random() * (-6) - 3, radius: Math.random() * 1.5 + 1 }; return drop; }
                function madedrops(x, y) {
                        let maxi = Math.floor(Math.random() * 5 + 5);
                        for (let i = 0; i < maxi; i++) {
                        dropList.push(createDrop(x, y));
                        }
                }
                window.requestAnimationFrame(update);
                function update() { if (dropList.length > 0) { dropList.forEach(function (e) { e.vx = e.vx + (speedx / 2); e.posx = e.posx + e.vx; e.vy = e.vy + gravity; e.posy = e.posy + e.vy; if (e.posy > canv.clientHeight) { e.die = true; } }); } for (let j = dropList.length - 1; j >= 0; j--) { if (dropList.die) { dropList.splice(j, 1); } } speedx = speedx + (maxspeedx - speedx) / 50; for (let i = 0; i < lineNum; i++) { createLine(Math.random() * 2 * canv.width - (0.5 * canv.width)); } let endLine = canv.clientHeight - Math.random() * canv.clientHeight / 5; linelist.forEach(function (e) { let dis = Math.sqrt(((e.posx + speedx * e.h) - mousePos) * ((e.posx + speedx * e.h) - mousePos) + (e.posy + e.h - mousePos) * (e.posy + e.h - mousePos)); if (dis < mouseDis) { e.die = true; madedrops(e.posx + speedx * e.h, e.posy + e.h); } if ((e.posy + e.h) > endLine) { e.die = true; madedrops(e.posx + speedx * e.h, e.posy + e.h); } if (e.posy >= canv.clientHeight) { e.die = true; } else { e.posy = e.posy + e.speed; e.posx = e.posx + e.speed * speedx; } }); for (let j = linelist.length - 1; j >= 0; j--) { if (linelist.die) { linelist.splice(j, 1); } } render(); window.requestAnimationFrame(update); }
                function render() { ctx.fillRect(0, 0, canv.width, canv.height); ctx.lineWidth = 1; linelist.forEach(function (line) { ctx.strokeStyle = line.color; ctx.beginPath(); ctx.moveTo(line.posx, line.posy); ctx.lineTo(line.posx + line.h * speedx, line.posy + line.h); ctx.stroke(); }); ctx.lineWidth = 0.5; ctx.strokeStyle = "#fff"; dropList.forEach(function (e) { ctx.beginPath(); ctx.arc(e.posx, e.posy, e.radius, Math.random() * Math.PI * 2, 1 * Math.PI); ctx.stroke(); }); }
                function offset(e) { let x = e.offsetLeft, y = e.offsetTop, pa = e.offsetParent; while(pa != null) { x += pa.offsetLeft; y += pa.offsetTop; pa = pa.offsetParent; } return {x, y}; }
        })();
        /* canvas雨代码至此 */
};

</script>

起个网名好难 发表于 2024-2-12 21:44

本帖最后由 起个网名好难 于 2024-2-12 21:56 编辑

https://pic.rmb.bdstatic.com/8ea7a54d268bdef1763b9575aa3fd9983294.gif
画面漂亮

起个网名好难 发表于 2024-2-12 21:55

本帖最后由 起个网名好难 于 2024-2-13 07:25 编辑 <br /><br />好像没音乐，歌词不动。

https://music.163.com/song/media/outer/url?id=1378452147.mp3

<!-- audio id="ypaud" src="https://music.163.com/song/media/outer/url?id=1378452147.mp3" autoplay="" loop=""></audio -->

马黑黑 发表于 2024-2-12 22:10

画面布局到位，雅致而大气。音乐听不到，不然效果更为理想。

红影 发表于 2024-2-12 22:29

很漂亮的制作。音乐好像听不到呢{:4_204:}

醉美水芙蓉 发表于 2024-2-13 08:05

起个网名好难 发表于 2024-2-12 21:55
本帖最后由 起个网名好难 于 2024-2-13 07:25 编辑 好像没音乐，歌词不动。

https://music.163.com/son ...

谢谢老师光临！

醉美水芙蓉 发表于 2024-2-13 08:06

马黑黑 发表于 2024-2-12 22:10
画面布局到位，雅致而大气。音乐听不到，不然效果更为理想。

音乐外链暂时失效吧！

醉美水芙蓉 发表于 2024-2-13 08:06

红影 发表于 2024-2-12 22:29
很漂亮的制作。音乐好像听不到呢

谢谢红影美女鼓励，音乐外链暂时失效了！

马黑黑 发表于 2024-2-13 08:08

醉美水芙蓉 发表于 2024-2-13 08:06
音乐外链暂时失效吧！

mp3的URL不能访问：

你的连接不是专用连接
攻击者可能试图从 www.qqmc.com 窃取你的信息(例如，密码、消息或信用卡)。
NET::ERR_CERT_DATE_INVALID

愤怒的葡萄 发表于 2024-2-13 08:15

挺漂亮的音画。

三月的阳光 发表于 2024-2-13 10:21

画面布局漂亮~~{:4_187:}

红影 发表于 2024-2-13 10:49

醉美水芙蓉 发表于 2024-2-13 08:06
谢谢红影美女鼓励，音乐外链暂时失效了！

是啊，挺遗憾的，听不到呢。

梦油 发表于 2024-2-13 10:53

芙蓉朋友过年好！
我曾在西湖坐过雨天的乌篷船，那种感觉妙极了。

醉美水芙蓉 发表于 2024-2-13 11:56

梦油 发表于 2024-2-13 10:53
芙蓉朋友过年好！
我曾在西湖坐过雨天的乌篷船，那种感觉妙极了。

谢谢梦油老师光临！

醉美水芙蓉 发表于 2024-2-13 11:57

马黑黑 发表于 2024-2-13 08:08
mp3的URL不能访问：

你的连接不是专用连接


谢谢黑黑老师告知！

醉美水芙蓉 发表于 2024-2-13 11:58

三月的阳光 发表于 2024-2-13 10:21
画面布局漂亮~~

谢谢阳光友友鼓励！

起个网名好难 发表于 2024-2-13 12:42

本帖最后由 起个网名好难 于 2024-2-13 15:20 编辑

醉美水芙蓉 发表于 2024-2-13 08:05
谢谢老师光临！
试试这个链接
https://music.163.com/song/media/outer/url?id=1378452147.mp3
或

https://mp3.t57.cn:7087/kwlink_d.php?id=6863587

马黑黑 发表于 2024-2-13 14:08

醉美水芙蓉 发表于 2024-2-13 11:57
谢谢黑黑老师告知！

可以考虑换个地址

梦油 发表于 2024-2-13 14:19

醉美水芙蓉 发表于 2024-2-13 11:56
谢谢梦油老师光临！

别客气。

樵歌 发表于 2024-2-13 18:27

真的景儿没画面美！每种代表江南美景的元素都出現在最该出現的地方！而且还是动态的！太美了！

查看完整版本: 水墨醉江南