马黑黑 发表于 2024-6-19 12:28

烛影

<style>
        #tz { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://638183.freep.cn/638183/t24/2/vuyk.jpg') no-repeat center/cover; border-radius: 20px 0; box-shadow: 3px 3px 12px black; z-index: 1; position: relative; }
        #tz::before { content: attr(data-lrc); position: absolute; bottom: 10px; width: 100%; height: 60px; text-align: center; font: normal 32px/60px sans-serif; color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text; filter: drop-shadow(-1px -3px 2px cyan); }
        #player { left: calc(50% - 50px); bottom: 80px; width: 100px; height: 100px; filter: drop-shadow(0 0 40px cyan); cursor: pointer; transition: .5s; position: absolute; display: grid; place-items: center; animation: rot 8s linear infinite var(--state); }
        #vid { position: absolute; top: 0; width: 160px; height: 260px; clip-path: circle(60%); object-fit: cover; mix-blend-mode: screen; opacity: .35; pointer-events: none; }
        #player:hover { width: 120px; height: 120px; filter: hue-rotate(180deg) drop-shadow(0 0 40px cyan); }
        c-c { position: absolute; width: 80%; height: 80%; border: thick inset plum; border-radius: 100% 20%; opacity: .75; }
        @keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="tz" data-lrc="烛影">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1995785157" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/72/5b48ded397d72.mp4" autoplay loop muted disablePictureInPicture></video>
        <div id="player"></div>
</div>

<script>
var curkey = 0, lrcAr = [], total = 10;
Array.from({length: total}).forEach((c,k) => {
        c = document.createElement('c-c');
        c.style.cssText += `
                transform: rotate(${360 / total * k}deg);
                border-color: #${Math.random().toString(16).substring(2,8)};
        `;
        player.appendChild(c);
});
var getAr = (text) => {
        var ar = text.trim().split('\n');
        ar.sort();
        var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
        ar.forEach(item => {
                let result = item.match(reg);
                let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
                lrcAr.push(.trim()]);
        });
};
var mState = () => {
        tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
        player.title = ['暂停','播放'][+aud.paused];
};
aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
        if(curkey > lrcAr.length - 1) return;
        if(aud.currentTime >= lrcAr) {
                tz.dataset.lrc = lrcAr;
                curkey ++;
        }
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();

var lrc = `WENDY·白 - 烛影\nhey babe你不用太着急\nwe got time\n屋外又下起了小雨\n倒一杯红酒\n窝进沙发里\n轻晃的烛影藏着我们的秘密\nBing bing闪烁装有我的眼睛\n纤细的手指不止能弹钢琴\ndo re mi fa so la si如果你想听\n找部电影其实你早看过了\n管他呢谁不世界的过客\n反正到最后也没几人会记得\nyoudon't have to say sorry\n怎么会有那么多顾虑\n我们之间已经隔了太多的事情\n不止玻璃流下雨滴\n什么工具能留住香气\nclose get close to紧扣的掌心\n我的耳朵只听得见你的声音\n统一的心率连着呼吸\n像棉花糖融化进了水里\n（ only u）在我身边调动情绪才是安心\nplease back my butterfly\n第一眼的喜欢你让我怎么释怀\n我试着调整了没有你的生活状态\n看起来多彩\n对我而言还是黑白\nplease back my butterfly\n只有把你变成记忆才不会被人打败\n你是否也会在某个时间突然想起我来\n顺风入怀＞三十六度温暖\n回忆不攻自破\n带着花纹心的脉络\n他们劝我忘了\n忘了这本不该发生的\n（ how can i do that）\n怎么忘了挂着小兔子的（蓝色）毛衣\n怎么忘了你那闪烁装有我的眼睛\n怎么忘了烛影里藏着我们的秘密\n不止玻璃流下雨滴\n什么工具能留住香气\nclose紧扣的掌心\n统一的心率连着呼吸\n我的耳朵快要忘记（你的声音）`;
getAr(lrc);
</script>

马黑黑 发表于 2024-6-19 12:30

帖子代码
<style>
        #tz { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://638183.freep.cn/638183/t24/2/vuyk.jpg') no-repeat center/cover; border-radius: 20px 0; box-shadow: 3px 3px 12px black; z-index: 1; position: relative; }
        #tz::before { content: attr(data-lrc); position: absolute; bottom: 10px; width: 100%; height: 60px; text-align: center; font: normal 32px/60px sans-serif; color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text; filter: drop-shadow(-1px -3px 2px cyan); }
        #player { left: calc(50% - 50px); bottom: 80px; width: 100px; height: 100px; filter: drop-shadow(0 0 40px cyan); cursor: pointer; transition: .5s; position: absolute; display: grid; place-items: center; animation: rot 8s linear infinite var(--state); }
        #vid { position: absolute; top: 0; width: 160px; height: 260px; clip-path: circle(60%); object-fit: cover; mix-blend-mode: screen; opacity: .35; pointer-events: none; }
        #player:hover { width: 120px; height: 120px; filter: hue-rotate(180deg) drop-shadow(0 0 40px cyan); }
        c-c { position: absolute; width: 80%; height: 80%; border: thick inset plum; border-radius: 100% 20%; opacity: .75; }
        @keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="tz" data-lrc="烛影">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1995785157" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/72/5b48ded397d72.mp4" autoplay loop muted disablePictureInPicture></video>
        <div id="player"></div>
</div>

<script>
var curkey = 0, lrcAr = [], total = 10;
Array.from({length: total}).forEach((c,k) => {
        c = document.createElement('c-c');
        c.style.cssText += `
                transform: rotate(${360 / total * k}deg);
                border-color: #${Math.random().toString(16).substring(2,8)};
        `;
        player.appendChild(c);
});
var getAr = (text) => {
        var ar = text.trim().split('\n');
        ar.sort();
        var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
        ar.forEach(item => {
                let result = item.match(reg);
                let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
                lrcAr.push(.trim()]);
        });
};
var mState = () => {
        tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
        player.title = ['暂停','播放'][+aud.paused];
};
aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
        if(curkey > lrcAr.length - 1) return;
        if(aud.currentTime >= lrcAr) {
                tz.dataset.lrc = lrcAr;
                curkey ++;
        }
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();

var lrc = `WENDY·白 - 烛影\nhey babe你不用太着急\nwe got time\n屋外又下起了小雨\n倒一杯红酒\n窝进沙发里\n轻晃的烛影藏着我们的秘密\nBing bing闪烁装有我的眼睛\n纤细的手指不止能弹钢琴\ndo re mi fa so la si如果你想听\n找部电影其实你早看过了\n管他呢谁不世界的过客\n反正到最后也没几人会记得\nyoudon't have to say sorry\n怎么会有那么多顾虑\n我们之间已经隔了太多的事情\n不止玻璃流下雨滴\n什么工具能留住香气\nclose get close to紧扣的掌心\n我的耳朵只听得见你的声音\n统一的心率连着呼吸\n像棉花糖融化进了水里\n（ only u）在我身边调动情绪才是安心\nplease back my butterfly\n第一眼的喜欢你让我怎么释怀\n我试着调整了没有你的生活状态\n看起来多彩\n对我而言还是黑白\nplease back my butterfly\n只有把你变成记忆才不会被人打败\n你是否也会在某个时间突然想起我来\n顺风入怀＞三十六度温暖\n回忆不攻自破\n带着花纹心的脉络\n他们劝我忘了\n忘了这本不该发生的\n（ how can i do that）\n怎么忘了挂着小兔子的（蓝色）毛衣\n怎么忘了你那闪烁装有我的眼睛\n怎么忘了烛影里藏着我们的秘密\n不止玻璃流下雨滴\n什么工具能留住香气\nclose紧扣的掌心\n统一的心率连着呼吸\n我的耳朵快要忘记（你的声音）`;
getAr(lrc);
</script>帖子代码没什么特别的，主要是 -webkit-background-clip: text; 下文本阴影的设置，借助 filter: drop-shadow(); 属性实现。

南无月 发表于 2024-6-19 12:52

这个在昨天基础上加了视频，但是视频没有参与控制。。整贴颜色特别好看，歌曲好听，深情款款，娓娓道来的样子。。{:4_199:}

南无月 发表于 2024-6-19 12:53

马黑黑 发表于 2024-6-19 12:30
帖子代码
帖子代码没什么特别的，主要是 -webkit-background-clip: text; 下文本阴影的设置，借助 filter: ...

这个青色阴影使得歌词与背景更加协调，非常柔和的效果。{:4_173:}这也是个小妙招

马黑黑 发表于 2024-6-19 13:02

南无月 发表于 2024-6-19 12:53
这个青色阴影使得歌词与背景更加协调，非常柔和的效果。这也是个小妙招

阴影颜色也是讲究的，还有它的模糊半径。如果再用上转色相滤镜，还需要考虑滤镜的前后关系。

马黑黑 发表于 2024-6-19 13:03

南无月 发表于 2024-6-19 12:52
这个在昨天基础上加了视频，但是视频没有参与控制。。整贴颜色特别好看，歌曲好听，深情款款，娓娓道来的 ...

视频参与控制的时候，需要额外做处理，比如给它加个覆盖元素、透过该元素来接受点击操作。这会有额外的代码，有时候不想让代码太多。

梦江南 发表于 2024-6-19 14:05

欣赏学习老师的精彩音画！向老师致敬！{:4_199:}

红影 发表于 2024-6-19 16:02

右上角的原来是视频，开始还以为是动图呢。
黑黑什么别致的视频都能找到，我也总往熊猫跑，就没看到这么多好玩的视频{:4_173:}

红影 发表于 2024-6-19 16:04

歌曲好听，歌词阴影特别漂亮。看了黑黑几个漂亮的歌词文字的修饰了，都好漂亮{:4_199:}

红影 发表于 2024-6-19 16:07

播放器按钮的阴影设计也漂亮。细节能给人带来很多奇妙的感受{:4_199:}

马黑黑 发表于 2024-6-19 17:53

红影 发表于 2024-6-19 16:07
播放器按钮的阴影设计也漂亮。细节能给人带来很多奇妙的感受

细节也是重要的

马黑黑 发表于 2024-6-19 17:54

梦江南 发表于 2024-6-19 14:05
欣赏学习老师的精彩音画！向老师致敬！

{:4_190:}

马黑黑 发表于 2024-6-19 18:00

红影 发表于 2024-6-19 16:04
歌曲好听，歌词阴影特别漂亮。看了黑黑几个漂亮的歌词文字的修饰了，都好漂亮

这些，先弄懂基础：

color: transparent;
-webkit-background-clip: text;

酱紫呢，背景就显示在了文本上。

由于文本前景色透明，所以，如果简单地使用属性 text-shadow: 1px 1px 2px gray; 修饰文本阴影，阴影所设置的颜色直接入侵文本主体，背景色显示在文本上的状态深受影响甚至被取代。所以，要使用滤镜属性 filter: drop-shadow(1px 1px 2px gray); 来实现阴影。

南无月 发表于 2024-6-19 18:03

马黑黑 发表于 2024-6-19 13:02
阴影颜色也是讲究的，还有它的模糊半径。如果再用上转色相滤镜，还需要考虑滤镜的前后关系。

好哒，反正阴影不是随意加的。
就像上次我的歌词不显，老师给个方案一下子就有效果了。。
这个阴影也有大学问。。

转色相滤镜，还需要考虑滤镜的前后关系
这个前后关系是指内阴影和外阴影么？

南无月 发表于 2024-6-19 18:05

马黑黑 发表于 2024-6-19 13:03
视频参与控制的时候，需要额外做处理，比如给它加个覆盖元素、透过该元素来接受点击操作。这会有额外的代 ...

我说的不是这让视频当小播，而是小播控制视频暂停。
毕竟习惯了点小播控制所有的动态暂停
试了下用之前的知识就可以解决。{:4_170:}

马黑黑 发表于 2024-6-19 18:05

南无月 发表于 2024-6-19 18:03
好哒，反正阴影不是随意加的。
就像上次我的歌词不显，老师给个方案一下子就有效果了。。
这个阴影也有 ...

这些靠说说明白不了，自己做过尝试，慢慢能理解

马黑黑 发表于 2024-6-19 18:06

南无月 发表于 2024-6-19 18:05
我说的不是这让视频当小播，而是小播控制视频暂停。
毕竟习惯了点小播控制所有的动态暂停
试了下用之前 ...

不过要尽可能有机整合。比如好端端的 mState() 函数你不用，还去整一个单击事件来管理视频，没必要

南无月 发表于 2024-6-19 22:48

马黑黑 发表于 2024-6-19 18:05
这些靠说说明白不了，自己做过尝试，慢慢能理解

刚跟了一贴，我做贴慢要顾得太多，阴影这块还要慢慢细看。
刚好发不出来，明天调调再说。{:4_170:}

南无月 发表于 2024-6-19 22:49

马黑黑 发表于 2024-6-19 18:06
不过要尽可能有机整合。比如好端端的 mState() 函数你不用，还去整一个单击事件来管理视频，没必要

好哒，我正在尽量得满头大汗。。
就是整出来，编辑器里可以，发贴预览一切正常。。发出来就没了。。
我有点晕{:4_170:}

马黑黑 发表于 2024-6-19 23:17

南无月 发表于 2024-6-19 22:49
好哒，我正在尽量得满头大汗。。
就是整出来，编辑器里可以，发贴预览一切正常。。发出来就没了。。
我 ...

逻辑要清晰
页: [1] 2 3 4 5 6 7 8
查看完整版本: 烛影