滚滚长江东逝水
本帖最后由 马黑黑 于 2023-10-6 10:46 编辑 <br /><br /><style>#papa { margin: -80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://file.uhsea.com/2310/d6a8d80e63f94699c69b296e45dafca1CF.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#papa::before, #papa::after { position: absolute; content: url('https://file.uhsea.com/2310/5e73a209c889ccc1a38440e006beff45ZJ.gif'); top: 0; mix-blend-mode: screen; opacity: .75; }
#papa::after { top: calc(100% - 188px); opacity: .25; }
</style>
<div id="papa">
<audio id="aud" src="https://file.uhsea.com/2310/89e20b56d339cf95386329404fe55ef9DL.mp3" autoplay loop></audio>
</div>
<script>
(function() {
let lrcAr = [ , , , , , , , , , , , , , ];
let js1 = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js',
js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.js';
let loadJs = (url,callback) => {
let body = document.querySelector('body'), jsNode = document.createElement('script');
jsNode.charset = 'utf-8';
jsNode.setAttribute('src', url);
body.appendChild(jsNode);
jsNode.onload = () => callback();
};
loadJs(js1, () => {
HCPlayer({
papa: '#papa',
lrcAr: lrcAr,
lrc_css: 'bottom: 20px;',
fs_css: 'transform: translate(0,-35px); background: transparent;',
player_css: 'width: 200px; height: 100px; bottom: 70px; filter: hue-rotate(90deg);',
path: 'M5 50 L10 45 Q35 80 50 50 T100 70 T160 70 T 195 65',
btn: {left: 64, top: 0},
track: {track: 'olive', prog: 'darkred'},
img: {play: '', pause: ''}
});
});
loadJs(js2, () => {
H5lz({
papa: '#papa',
total: 25,
size: {width: 18, height: 18},
shape: {background: 'url("https://file.uhsea.com/2310/43504e3a64e8c4097e61d90b8ec49e02L3.png") no-repeat center/cover', borderRadius: ''},
ani: 'toBottom',
maxTime: 30,
offset: {x: 0, y: 0},
});
});
})();
</script> 本帖最后由 马黑黑 于 2023-10-6 10:47 编辑 <br /><br /><style>
.papa {}
.papa > p {margin: 8px 0;}
.mama {height: fit-content; display: grid; grid-template-columns: 50px auto; grid-template-rows: 1fr; padding: 0; margin: 20px 0; background: #f9f9f9; box-shadow: 0 0 2px #000; position: relative;}
.hCode, .hLineNum {margin: 0;padding: 10px 4px;width: 100%;box-sizing: border-box;font-size: 14px;line-height: 16px;}
.hCode {overflow-x: auto; tab-size: 3;}
.hLineNum {border-right: 1px solid #ccc;text-align: right;color: gray;user-select: none;}
.stage {display: grid; place-items: center;}
</style>
<div class="papa">
<p>帖子代码：</p>
<div class="mama">
<pre class="hLineNum"></pre>
<pre class="hCode"><style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://file.uhsea.com/2310/d6a8d80e63f94699c69b296e45dafca1CF.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#papa::before, #papa::after { position: absolute; content: url('https://file.uhsea.com/2310/5e73a209c889ccc1a38440e006beff45ZJ.gif'); top: 0; mix-blend-mode: screen; opacity: .75; }
#papa::after { top: calc(100% - 188px); opacity: .25; }
</style>
<div id="papa">
<audio id="aud" src="https://file.uhsea.com/2310/89e20b56d339cf95386329404fe55ef9DL.mp3" autoplay loop></audio>
</div>
<script>
(function() {
let lrcAr = [ , , , , , , , , , , , , , ];
let js1 = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js',
js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.js';
let loadJs = (url,callback) => {
let body = document.querySelector('body'), jsNode = document.createElement('script');
jsNode.charset = 'utf-8';
jsNode.setAttribute('src', url);
body.appendChild(jsNode);
jsNode.onload = () => callback();
};
loadJs(js1, () => {
HCPlayer({
papa: '#papa',
lrcAr: lrcAr,
lrc_css: 'bottom: 20px;',
fs_css: 'transform: translate(0,-35px); background: transparent;',
player_css: 'width: 200px; height: 100px; bottom: 70px; filter: hue-rotate(90deg);',
path: 'M5 50 L10 45 Q35 80 50 50 T100 70 T160 70 T 195 65',
btn: {left: 64, top: 0},
track: {track: 'olive', prog: 'darkred'},
img: {play: '', pause: ''}
});
});
loadJs(js2, () => {
H5lz({
papa: '#papa',
total: 25,
size: {width: 18, height: 18},
shape: {background: 'url("https://file.uhsea.com/2310/43504e3a64e8c4097e61d90b8ec49e02L3.png") no-repeat center/cover', borderRadius: ''},
ani: 'toBottom',
maxTime: 30,
offset: {x: 0, y: 0},
});
});
})();
</script></pre>
</div>
<p>【说明】player_css 配置中，filter: hue-rotate(90deg); 这一句，作用是转换色相，将播放器各元素的颜色都做了调整。</p>
</div>
<script>
let hCodes = document.querySelectorAll('.hCode'),
hLineNums = document.querySelectorAll('.hLineNum');
hCodes.forEach((item,key) => {
let lines = hCodes.innerText.trim().split('\n').length;
let str = '';
for(i = 0; i < lines; i ++) {
str += i + 1 + '\n';
}
hLineNums.innerText = str;
});
</script> 青山绿水、 重峦叠嶂、水秀山明、江山如画，太美了，太美了。 用路径来模拟波浪，这设想真棒{:4_187:} 还弄了带倒影的闪光和飘飞的落叶，背景选择的风景真美{:4_204:} 哦，前面没看仔细，不是倒影呢，是下面那个加了透明度{:4_173:} 红影 发表于 2023-10-6 12:02
哦，前面没看仔细，不是倒影呢，是下面那个加了透明度
模拟倒影的方法很多的 醉美水芙蓉 发表于 2023-10-6 11:46
欣赏老师新作品！太霸气了！
{:4_190:} 红影 发表于 2023-10-6 12:00
还弄了带倒影的闪光和飘飞的落叶，背景选择的风景真美
长江很美的 红影 发表于 2023-10-6 11:56
用路径来模拟波浪，这设想真棒
其实它大概是长江的主干走势图，不精准，大概弄一下 马黑黑 发表于 2023-10-6 12:09
模拟倒影的方法很多的
是的，这种好方法，不挑播放器。 马黑黑 发表于 2023-10-6 12:10
长江很美的
那是当然，它是炎黄子孙的母亲河啊。 马黑黑 发表于 2023-10-6 12:10
其实它大概是长江的主干走势图，不精准，大概弄一下
不管怎么说，这个主题都适合曲线的，这个走势也挺像啊。{:4_187:} 欣赏{:4_187:} 画面真美，现在的新农村都是山青水秀了，美极了 杨洪基的演唱也是高八度的，声音洪亮，有气势{:4_178:} 欣赏马老师的新分享{:4_199:} 这个转换色相前面有看见分享了，但不知道怎么用，黑黑一步步深入分解了，小辣椒就等你做好直接套用了{:4_170:} 风景好美啊，那个金光闪闪的小太阳和飘落的片叶都是大亮点，播放器和伴侣也是美美达{:4_187:}
页:
[1]
2