论坛 › 音乐沙龙 › 《夜曲》（学习黑黑文本烟雾化效果）

红影 发表于 2024-1-21 11:46

《夜曲》（学习黑黑文本烟雾化效果）

<style>
#mydiv {
        margin: 0 0 0 calc(50% - 681px);
        width: 1200px;
        height: 675px;
        background: url('https://pic.imgdb.cn/item/65ac84cd871b83018abc0aaf.jpg');
        box-shadow: 4px 4px 12px rgba(0,0,0,.7);
        border: 1px solid gray;
        overflow: hidden;
        z-index: 1;
      background-repeat: repeat;
      background-size: 100% 100%;
      background-position: 0 0;
      animation: mov 30s infinite linear var(--state);
        position: relative;
}
#vid {
        position: absolute;
        width: 100%;
        height: 73%;
top: -10%;
opacity(.30);
        object-fit: cover;
        mix-blend-mode: screen;
        clip-path: inset(10% 0 0 0);
}
#player {
        position: absolute;
        left: 10%;
        top: 20%;
        width: 150px;
        height: 150px;
        cursor: pointer;
        animation: rot 6s infinite linear var(--state);
}
#ma {
        position: absolute;
        top: -100px; left:480px;
        width: 400px;
        height: 400px;
        font: bold 8.4em serif;
        color: transparent;
        letter-spacing: 0.8em;
        display: flex;
        justify-content: center;
        align-items: end;
}
.txtBox {
        text-shadow: 0 0 0 rgba(218,165,32,0.6);
        animation: gone var(--du) var(--de) infinite var(--state);
}
@keyframes gone {
        60% {
                text-shadow: 0 0 120px rgba(255,250,240,.9);
                opacity: .8;
        }
        100% {
                text-shadow: 0 0 80px rgba(255,250,240,.6);
          transform: translate(-60px,-80px) rotate(-180deg) skew(20deg) scale(1.2);
                opacity: 0;
        }
}
@keyframes mov {
      to { background-position: -1200px 0; }
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mydiv">
<div id="ma"></div>

        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1897065565" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/7165162/00/20/20/5f2102739a334_10s_big.mp4" loop muted></video>
        <img id="player" src="https://pic.imgdb.cn/item/65ac84e5871b83018abc5b1d.gif" alt="" title="播放/暂停" />
</div>

<script>
(function() {
let strAr = '夜曲'.split('');
strAr.forEach((text,key) => {
        let span = document.createElement('span');
        span.className = 'txtBox';
        span.textContent = text;
        span.style.cssText += `
                --du: ${strAr.length * 2.4 + 1}s;
                --de: ${key * 2.2}s;
        `;
        ma.appendChild(span);
});
        let mState = () => aud.paused ? (mydiv.style.setProperty('--state', 'paused'),vid.pause()) : (mydiv.style.setProperty('--state', 'running'),vid.play());
        aud.addEventListener('playing', mState, false);
        aud.addEventListener('pause', mState, false);
        player.addEventListener('click', ()=> aud.paused ? aud.play() : aud.pause(),false);
})();
</script>

红影 发表于 2024-1-21 11:48

回帖时说想试一下把文字的烟雾放到帖子里去，就试了一个，好像烟雾不是很明显，我还特地让烟雾色取了比文字更浅的颜色，为了衬托背景的暗色{:4_173:}@马黑黑

红影 发表于 2024-1-21 11:49

一下子折腾了一个上午，我做帖子太慢了。先去吃饭了{:4_193:}

红影 发表于 2024-1-21 11:50

哦，对了，这个视频我学了个用矩形去切割，果然很省力{:4_173:}

马黑黑 发表于 2024-1-21 11:59

红影 发表于 2024-1-21 11:48
回帖时说想试一下把文字的烟雾放到帖子里去，就试了一个，好像烟雾不是很明显，我还特地让烟雾色取了比文字 ...

深色背景，文本及其阴影可以考虑白色系

小辣椒 发表于 2024-1-21 12:20

纯欣赏了，亲爱的好制作{:4_199:}

樵歌 发表于 2024-1-21 12:25

无垠的夜空下，人间正万家灯火，太美了！

红影 发表于 2024-1-21 13:14

马黑黑 发表于 2024-1-21 11:59
深色背景，文本及其阴影可以考虑白色系

我用的就是偏白的啊，还把透明度也调高了点，感觉还是不太明显呢{:4_173:}

红影 发表于 2024-1-21 13:15

小辣椒 发表于 2024-1-21 12:20
纯欣赏了，亲爱的好制作

黑黑的新效果啊，我只是合到背景滚动的效果里了{:4_173:}

红影 发表于 2024-1-21 13:16

樵歌 发表于 2024-1-21 12:25
无垠的夜空下，人间正万家灯火，太美了！

发现叫夜曲的音乐特别多，听了好几个，觉得这个还不错，就用了。
谢谢师兄鼓励{:4_187:}

马黑黑 发表于 2024-1-21 13:18

红影 发表于 2024-1-21 13:14
我用的就是偏白的啊，还把透明度也调高了点，感觉还是不太明显呢

你用白的就好得多

樵歌 发表于 2024-1-21 14:18

红影 发表于 2024-1-21 13:16
发现叫夜曲的音乐特别多，听了好几个，觉得这个还不错，就用了。
谢谢师兄鼓励

有创意的学习，不是简单的照抄，学霸的{:4_189:}

梦油 发表于 2024-1-21 16:42

好漂亮的夜景，再加上若隐若现的“夜曲”两个字，真是流光溢彩、美不胜收。

红影 发表于 2024-1-21 21:05

马黑黑 发表于 2024-1-21 13:18
你用白的就好得多

有可能，回头我再试试{:4_187:}

红影 发表于 2024-1-21 21:07

樵歌 发表于 2024-1-21 14:18
有创意的学习，不是简单的照抄，学霸的

这个不难啊，所以做不了学霸，下回学个难的{:4_173:}

红影 发表于 2024-1-21 21:07

梦油 发表于 2024-1-21 16:42
好漂亮的夜景，再加上若隐若现的“夜曲”两个字，真是流光溢彩、美不胜收。

谢谢梦油鼓励，这个晚上看更好，窗内窗外都是夜景{:4_173:}

红影 发表于 2024-1-21 21:09

这个按钮还是用了亦是金老师的一个帖子里的动图，谢谢亦是金老师@亦是金{:4_187:}

马黑黑 发表于 2024-1-21 21:25

红影 发表于 2024-1-21 21:05
有可能，回头我再试试

好的

红影 发表于 2024-1-21 22:56

马黑黑 发表于 2024-1-21 21:25
好的

也可以让第一个百分比的亮度再高点。{:4_173:}

马黑黑 发表于 2024-1-21 23:16

红影 发表于 2024-1-21 22:56
也可以让第一个百分比的亮度再高点。

都可以

查看完整版本: 《夜曲》（学习黑黑文本烟雾化效果）