查看: 1008|回复: 37

[单图] 【黑师代码】时间都去哪儿了(赠:梦若心兰)

[复制链接]
一叶知秋 版主勋章 山高为峰 山外有山 樱果相依 24 46 47 48 闲花落
发表于 2024-2-4 10:40 | 显示全部楼层 |阅读模式
本帖最后由 花简静 于 2024-2-6 18:53 编辑













评分

6

查看全部评分

点评
回复

使用道具

一叶知秋 版主勋章 山高为峰 山外有山 樱果相依 24 46 47 48 闲花落
 楼主| 发表于 2024-2-4 10:41 | 显示全部楼层
本帖最后由 花简静 于 2024-2-19 20:07 编辑


<style>#papa { 
	margin: 0 0 0 calc(50% - 831px); 
	width: 1500px; 
	height: 800px; 
	top:130px;
	background: url('https://pic.imgdb.cn/item/651e80cac458853aef331214.webp') no-repeat center/cover; 
	box-shadow: 3px 3px 20px #000; 
	overflow: hidden; 
	display: grid; 
	place-items: center; 
	z-index: 1; 
	position: relative; 
	--state: running; }
#vid {
    position: absolute;
    width: 100%;
    height: 100%;
    top:-50px;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 2;
    opacity: .16;
}

</style>
<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/01/88/5b4c8eda299fc.mp4" autoplay="" loop="" muted=""></video>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2024/01/23/b0b9a12429de408f3f7f6d4f2ef676ce.mp3" autoplay="" loop=""></audio>
<script>
(function() {
let script = document.createElement('script');
    script.src = 'https://638183.freep.cn/638183/web/api/tape_lrc.js';
    script.charset = 'utf-8';
    document.head.appendChild(script);

    let geci = [
    [-0.2,"单曲:时间都去哪儿了",1.4],
    [1.16,"电视剧《老牛家的战争》主题曲",2.1],
    [3.22,"歌手:王铮亮",1.4],
    [4.58,"所属专辑:听得到的时间",1.3],
    [5.85,"作词 : 陈曦",1.3],
    [7.13,"作曲 : 董冬冬",1.8],
    [8.95,"学习黑师《刀朗-珠儿》磁带播放器效果",3.1],
    [22.01,"门前老树长新芽",3.9],
    [26.82,"院里枯木又开花",4.2],
    [31.97,"半生存了好多话",4.0],
    [37.02,"藏进了满头白发",2.8],
    [42.14,"记忆中的小脚丫",3.9],
    [47.18,"肉嘟嘟的小嘴巴",4.0],
    [52.09,"一生把爱交给他",4.2],
    [57.25,"只为那一声爸妈",2.8],
    [62.98,"时间都去哪儿了",2.6],
    [67.61,"还没好好感受年轻就老了",4.8],
    [73.71,"生儿养女 一辈子",4.3],
    [79.16,"满脑子都是孩子哭了笑了",3.5],
    [83.16,"时间都去哪儿了",3.2],
    [87.87,"还没好好看看你眼睛就花了",4.9],
    [94.1,"柴米油盐 半辈子",4.1],
    [99.35,"转眼就只剩下满脸的皱纹了",6.9],
    [108.18,"",21.9],
    [130.09,"记忆中的小脚丫",4.4],
    [135.47,"肉嘟嘟的小嘴巴",4.0],
    [140.6,"一生把爱交给他",4.0],
    [145.68,"只为那一声爸妈",2.8],
    [151.37,"时间都去哪儿了",2.8],
    [156.12,"还没好好感受年轻就老了",4.7],
    [162.14,"生儿养女 一辈子",4.2],
    [167.61,"满脑子都是孩子哭了笑了",3.6],
    [171.59,"时间都去哪儿了",2.7],
    [176.46,"还没好好看看你眼睛就花了",4.8],
    [182.3,"柴米油盐 半辈子",4.4],
    [187.71,"转眼就只剩下满脸的皱纹了",7.8]
];
 window.onload = () => {
    HCPlayer({
        papa: '#papa',
        lrcAr: geci,
        lrc_css: `
            top: 20px;
            color: #999;
            --bg: linear-gradient(rgba(250,250,250,.25),rgba(138,64,30,.65));
        `,
        player_css: `
            bottom: 2%;
            left: 50%;
            color: lightblue;
            z-index: 100;
            --track: darkgray;
            --prog:black;
        `,
        fs_css: `bottom: 30px;left:10px; background: transparent;--color: white;`,
        title: '时间都去哪儿了',
    });

    let mkClover = (ele,num) => {
        let r = ele.offsetWidth / 2, pathAr = [];
        for(let i = 0; i < 200; i ++) {
            let angle = i * 2 * Math.PI / 200;
            let x = r - r * Math.sin(num * angle) * Math.cos(angle);
            let y = r - r * Math.sin(num * angle) * Math.sin(angle);
            pathAr.push(x + 'px ' + y + 'px');
        }
        return 'polygon(' + pathAr.join(', ') + ')';
    }

    Array.from({length: 16}).forEach((item) => {
        let ww = 50 + Math.floor(Math.random() * 50);
        let ar = [2,3,4,5,7,9];
        item = document.createElement('span');
        item.className = 'clover';
        item.style.cssText += `
            --deg: ${60 - Math.random() * 150}deg;
            --delay: ${Math.random() * 20 - 20}s;
            width: ${ww}px;
            height: ${ww}px;
            right: 200px;
        `;
        papa.appendChild(item);
        item.style.clipPath = mkClover(item, ar[Math.floor(Math.random() * ar.length)]);
    });
};
})();

setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>
<br><br><br><br><br><br><br><br><br><br><br><br>


    
点评
回复

使用道具

一叶知秋 版主勋章 山高为峰 山外有山 樱果相依 24 46 47 48 闲花落
 楼主| 发表于 2024-2-4 10:41 | 显示全部楼层
本帖最后由 花简静 于 2024-2-11 15:44 编辑

1.改图片——前五行代码里的图片地址换成自己的
2.改视频动画——MP4结尾的那个地址。
3.改音乐地址——MP3结尾的那个地址。
4.改歌词——=   到  ];结尾部分。
5.改播放器—— script.src = 'https://638183.freep.cn/638183/web/api/tape_lrc.js';  JS结尾的这个地址。


1.找代码方法:右键,查源源代码,大约从272行开始,黑色的那些就是一楼贴子的代码了。。。
2.改音乐的方法:
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=165026" autoplay="" loop=""></audio>
这一串,一般我把ID后面的数字改成自己要的音乐。
3.改视频的方法:请参照置顶贴子《音画常用动态视频素材及获得方法》
以找“云”视频为例,找动态视频方法:
搜熊猫办公——音频视频——搜索框里打“云”——进入下个云页面——翻选素材(黑底!)——找到你喜欢的那个视频,点开——贴子空白处点右键查看网页源代码——看着左边的行数找212行——有个MP4文件地址——复制地址就可以。
4.改歌词的方法:请照置顶贴《歌词同步制作方法》。
5.更改播放器的 方法:

①点开黑师网站的播件汇总页面http://mhh.52qingyin.cn/api/player/
②从里面提供十几种播放器样式,挑选你喜欢的那个。
③把JS代码那行替换掉就可以了。
1、圆环进度条        https://638183.freep.cn/638183/web/api/circle_lrc.js
2、管状进度条        https://638183.freep.cn/638183/web/api/tube_lrc.js
3、细线进度条        https://638183.freep.cn/638183/web/api/line_lrc.js
4、普通频谱        https://638183.freep.cn/638183/web/api/pinpu_lrc.js
5、meter频谱        https://638183.freep.cn/638183/web/api/meter_pinpu_lrc.js
6、圆环斜频谱        https://638183.freep.cn/638183/web/api/pinpux_lrc.js
7、圆环正频谱        https://638183.freep.cn/638183/web/api/pinpuz_lrc.js
8、水波纹按钮        https://638183.freep.cn/638183/web/api/ewave_lrc.js
9、示波进度条        https://638183.freep.cn/638183/web/api/osc_lrc.js
10、滑块进度条        https://638183.freep.cn/638183/web/api/huakuai_lrc.js
11、3d六面体        https://638183.freep.cn/638183/web/api/3dbox6_lrc.js
12、充电器进度条        https://638183.freep.cn/638183/web/api/charger_lrc.js
13、卡式磁带        https://638183.freep.cn/638183/web/api/tape_lrc.js
14、假响应式频谱        https://638183.freep.cn/638183/web/api/xypinpu_lrc.js
15、老唱机        https://638183.freep.cn/638183/web/api/plater_lrc.js
16、示波状频谱        https://638183.freep.cn/638183/web/api/oscpp_lrc.js
17、脚链频谱        https://638183.freep.cn/638183/web/api/anklet_lrc.js
18、曲线进度条        https://638183.freep.cn/638183/web/api/curve_lrc.js
19、自由路径进度条        https://638183.freep.cn/638183/web/api/svg_path_lrc.js

④当然如果想改播放器的颜色,位置等请仔细看这页里面的说明。
点评
回复

使用道具

一叶知秋 版主勋章 山高为峰 山外有山 樱果相依 24 46 47 48 闲花落
 楼主| 发表于 2024-2-4 10:42 | 显示全部楼层
@梦若心兰 很喜欢你的贴子哦,一起玩图,一起快乐。。春天来啦,愿心情天天如春花般灿烂。。
点评
回复

使用道具

一叶知秋 樱果相依 24 46 47 48 金凤凰
发表于 2024-2-4 11:02 | 显示全部楼层
欣赏花花精美单图!
点评
回复

使用道具

一叶知秋 樱果相依 24 46 47 48 金凤凰
发表于 2024-2-4 11:02 | 显示全部楼层
祝花花美女周末愉快!
点评
回复

使用道具

一叶知秋 版主勋章 山高为峰 山外有山 樱果相依 24 46 47 48 闲花落
 楼主| 发表于 2024-2-4 11:11 | 显示全部楼层
醉美水芙蓉 发表于 2024-2-4 11:02
欣赏花花精美单图!

水妞来啦。。周末看到你真高兴,立春快乐。。。
点评
回复

使用道具

笑傲江湖
一叶知秋 版主勋章 山高为峰 山外有山 45 樱果相依 24 46 47 48 一坛酒
发表于 2024-2-4 11:14 | 显示全部楼层
很有感觉的一幅美图
动静结合
画面感人
佳作
点评
回复

使用道具

一叶知秋 山外有山 山高为峰 版主勋章 音画同行 梧桐鸟
发表于 2024-2-4 12:20 | 显示全部楼层
欣赏简静带来的精彩!
点评
回复

使用道具

一叶知秋 山外有山 山高为峰 版主勋章 音画同行 梧桐鸟
发表于 2024-2-4 12:21 | 显示全部楼层
图很美,歌也好听,问好简静,周末快乐!
点评
回复

使用道具

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|千山论坛

GMT+8, 2024-9-27 22:17

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

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