马黑黑 发表于 2024-8-1 12:27

另一个自己

<style>
@import 'https://638183.freep.cn/638183/web/css/yslrc.css';
#tz {
        --ox: 81px;
        --lrc-top: 90%;
        --lrc-bg: radial-gradient(silver,gray,darkgray) 50%/90px 60px;
        --lrc-shadow ：rgba(0, 0, 0, .7);
        width: 1280px;
        height: 720px;
        background: url('https://638183.freep.cn/638183/t24/4/self0.jpg') no-repeat center/cover;
        box-shadow: 2px 2px 6px gray;
        position: relative;
}
#player {
        --size: 200px;
        left: 30%;
        top: 50px;
}
.yz {
        position: absolute;
        width: 500px;
        height: 100%;
        background: url('https://638183.freep.cn/638183/t24/4/self1.jpg') no-repeat center/cover;
        -webkit-mask: linear-gradient(to right, red, transparent);
}
.yz:nth-of-type(2) {
        right: 0;
        filter: opacity(.35) sepia(80%);
        transform: rotateY(180deg);
}
.vid { height: calc(100% + 60px); }
</style>

<div id="tz" class="tz" data-lrc="HUACHAO">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=41640630" autoplay loop></audio>
        <video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/92/5e67a9a991900.mp4" autoplay loop muted></video>
        <div class="yz"></div>
        <div class="yz"></div>
        <img id="player" class="player" title="播放/暂停" src="https://638183.freep.cn/638183/small/ytji.png" alt="" />
</div>

<script>
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js/yslrc.js';
document.body.appendChild(sf);
var lrc = `大粉乐队 - 另一个自己\n想象在某天 星河坍塌\n在某天 海水枯干\n想象在某天 你爬上悬崖\n这一天 你就像个娃\n就算某天 时光倒转\n在某天 毁灭都不再可怕\n想象在某天 我感觉有点麻\n这一天 我会让你死在我的怀\n有个自己在慢慢中学会装聋和作哑\n还有另一种自己在想象狂热中 把世界都颠倒\n就算某天 钟不再摆\n在某天 秒针都不再滴答\n想象在某天 我感觉有点扎\n这一天 我会亲手把你埋葬\n有个自己在慢慢中学会装聋和作哑\n还有另一种自己在想象狂热中 把世界都颠倒`;
</script>

马黑黑 发表于 2024-8-1 12:28

<h2>帖子代码</h2>
<div class="hE"><pre>
&lt;style&gt;
@import 'https://638183.freep.cn/638183/web/css/yslrc.css';
#tz {
        --ox: 81px;
        --lrc-top: 90%;
        --lrc-bg: radial-gradient(silver,gray,darkgray) 50%/90px 60px;
        --lrc-shadow ：rgba(0, 0, 0, .7);
        width: 1280px;
        height: 720px;
        background: url('https://638183.freep.cn/638183/t24/4/self0.jpg') no-repeat center/cover;
        box-shadow: 2px 2px 6px gray;
        position: relative;
}
#player {
        --size: 200px;
        left: 30%;
        top: 50px;
}
.yz {
        position: absolute;
        width: 500px;
        height: 100%;
        background: url('https://638183.freep.cn/638183/t24/4/self1.jpg') no-repeat center/cover;
        -webkit-mask: linear-gradient(to right, red, transparent);
}
.yz:nth-of-type(2) {
        right: 0;
        filter: opacity(.35) sepia(80%);
        transform: rotateY(180deg);
}
.vid { height: calc(100% + 60px); }
&lt;/style&gt;

&lt;div id="tz" class="tz" data-lrc="HUACHAO"&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=41640630" autoplay loop&gt;&lt;/audio&gt;
        &lt;video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/92/5e67a9a991900.mp4" autoplay loop muted&gt;&lt;/video&gt;
        &lt;div class="yz"&gt;&lt;/div&gt;
        &lt;div class="yz"&gt;&lt;/div&gt;
        &lt;img id="player" class="player" title="播放/暂停" src="https://638183.freep.cn/638183/small/ytji.png" alt="" /&gt;
&lt;/div&gt;

&lt;script&gt;
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js/yslrc.js';
document.body.appendChild(sf);
var lrc = `大粉乐队 - 另一个自己\n想象在某天 星河坍塌\n在某天 海水枯干\n想象在某天 你爬上悬崖\n这一天 你就像个娃\n就算某天 时光倒转\n在某天 毁灭都不再可怕\n想象在某天 我感觉有点麻\n这一天 我会让你死在我的怀\n有个自己在慢慢中学会装聋和作哑\n还有另一种自己在想象狂热中 把世界都颠倒\n就算某天 钟不再摆\n在某天 秒针都不再滴答\n想象在某天 我感觉有点扎\n这一天 我会亲手把你埋葬\n有个自己在慢慢中学会装聋和作哑\n还有另一种自己在想象狂热中 把世界都颠倒`;
&lt;/script&gt;
</pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>

朵拉 发表于 2024-8-1 12:31

大沙发，欣赏学习哈~~{:4_190:}

南无月 发表于 2024-8-1 13:18

看第一眼，感觉白老师开始用PS处理图片了。。这图片融合的技术感太强了。。
看了代码，不是这么回事，还是代码PS。。{:4_173:}

南无月 发表于 2024-8-1 13:19

两张图片与背景融合，加了线性渐变融合。
filter: opacity(.35) sepia(80%);
第二张图片给了个反向，另外加了透明度，后面的sepia(80%)这是什么意思~~没见过。

南无月 发表于 2024-8-1 13:20

CSS部分打了包，
贴子加了歌词，用了封装JS，
重新温习一下这种方法，完美。。。{:4_199:}

南无月 发表于 2024-8-1 13:20

很特别的歌曲，
像演绎双子座的两种分裂性格。。
欣赏中。。。{:4_199:}

海笑 发表于 2024-8-1 14:03

欣赏老师佳作！

梦江南 发表于 2024-8-1 15:02

欣赏老师佳作，辛苦了！{:4_199:}{:4_187:}

红影 发表于 2024-8-1 15:09

用mask融合图片，总是效果奇妙。这个弄了两张，更是奇妙加倍{:4_199:}

红影 发表于 2024-8-1 15:10

css打包封装，还有js的打包封装，让代码更简洁{:4_204:}

红影 发表于 2024-8-1 15:12

美女，这类风格的帖子黑黑做得不多的，也觉得奇妙，尤其视频选择增添了帖子效果，很漂亮{:4_199:}

竹溪 发表于 2024-8-1 18:26

很奇妙的效果，太美了{:4_204:}

绿叶清舟 发表于 2024-8-2 19:38

这个代码不多啊

马黑黑 发表于 2024-8-2 19:46

绿叶清舟 发表于 2024-8-2 19:38
这个代码不多啊

部分CSS和JS封装好的

绿叶清舟 发表于 2024-8-2 20:04

马黑黑 发表于 2024-8-2 19:46
部分CSS和JS封装好的

这样用起来就方便多了

马黑黑 发表于 2024-8-2 21:29

绿叶清舟 发表于 2024-8-2 20:04
这样用起来就方便多了

是的吧

绿叶清舟 发表于 2024-8-2 21:59

马黑黑 发表于 2024-8-2 21:29
是的吧

明天来试试

小辣椒 发表于 2024-8-2 22:20

这个css也是封装了，加了歌词同步代码看上去还是不多，简洁的代码，不动脑子直接套用更加方便的{:4_173:}

马黑黑 发表于 2024-8-2 22:21

小辣椒 发表于 2024-8-2 22:20
这个css也是封装了，加了歌词同步代码看上去还是不多，简洁的代码，不动脑子直接套用更加方便的

{:4_172:}
页: [1] 2
查看完整版本: 另一个自己