红影 发表于 2024-4-27 19:53

《幻》（学习黑黑颗粒文字效果）


<style>
        #mydiv { margin: 60px 0 0 calc(50% - 721px); width: 1280px; height: 720px; background: url('https://pic.imgdb.cn/item/662ccc140ea9cb1403b04697.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; }
        #pic { position: absolute; left: 0px; bottom: 0px; animation: swear 3s infinite alternate var(--state); }
        #player { position: absolute; top: 55px; left: 650px; width: 180px; filter: drop-shadow(0 0 6px #fff) opacity(.55); cursor: pointer; animation: rot 6s linear infinite var(--state); }
        .vid { position: absolute; object-fit: cover; mix-blend-mode: screen; }
        .vid:nth-of-type(1) { bottom: 0; width: 100%; height: 83%; opacity: .85; }
        .vid:nth-of-type(2) { left: 0; top: 0; width: 100%; height: 110%; top: -10%; opacity: .15; }
        #mydiv canvas { transform: skew(20deg) scale(1.6, 1.4); }
        @keyframes rot { to { transform: rotate(360deg); } }
        @keyframes swear{ from { opacity: 1; } to { opacity: .35; } }
</style>

<div id="mydiv">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1973889214" autoplay loop></audio>
        <video class="vid" src="https://img.tukuppt.com/video_show/15653652/01/59/07/63806a6eb7241_10s_big.mp4" loop muted></video>
        <video class="vid" src="https://img.tukuppt.com/video_show/2629112/00/02/03/5b4f31096c398_10s_big.mp4" loop muted></video>
        <img id="pic" src="https://pic.imgdb.cn/item/662ccd010ea9cb1403b45180.png" alt="" />
        <img id="player" src="https://pic.imgdb.cn/item/662ccd7f0ea9cb1403b58e77.png" alt="" />
</div>

<script>
        var sc = document.createElement('script');
        sc.charset = 'utf-8';
        sc.src = 'https://638183.freep.cn/638183/web/js/lzwz.js';
        document.body.appendChild(sc);
        var wz = {papa: '#mydiv', text: '幻', left: '190px', top: '386px', color: 'rgba(255,0,255,.4)'};
        var vids = document.querySelectorAll('.vid');
        var mState = () => vids.forEach(vid => aud.paused ?
                (vid.pause(), mydiv.style.setProperty('--state', 'paused')) :
                (vid.play(),mydiv.style.setProperty('--state', 'running')));
        aud.onplaying = aud.onpause = () => mState();
        player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

红影 发表于 2024-4-27 19:55

学习一下文字效果，主要试试用rgba加点透明看看效果，另外学习一下 transform:scale() 放大一下文字。

红影 发表于 2024-4-27 19:55

感谢@马黑黑 的代码{:4_187:}

红影 发表于 2024-4-27 19:58

神秘莫测的遥远太空，充满了无数未知。能想到的玄幻也就如此吧。

马黑黑 发表于 2024-4-27 20:02

似幻似梦，令人回味无穷

色彩的搭配优雅，立体感的营造得分

小文 发表于 2024-4-27 20:12

好漂亮!欣赏!{:4_204:}

红影 发表于 2024-4-27 21:17

马黑黑 发表于 2024-4-27 20:02
似幻似梦，令人回味无穷

色彩的搭配优雅，立体感的营造得分

找了个字少的曲子，便于放到加的那个图图上面去{:4_173:}

红影 发表于 2024-4-27 21:19

小文 发表于 2024-4-27 20:12
好漂亮!欣赏!

谢谢小文鼓励，这个世界是浮幻的，如同在梦中一样{:4_173:}

上海朝阳 发表于 2024-4-27 21:28

迷幻的宇宙

马黑黑 发表于 2024-4-27 22:44

红影 发表于 2024-4-27 21:17
找了个字少的曲子，便于放到加的那个图图上面去

不错

红影 发表于 2024-4-27 22:46

上海朝阳 发表于 2024-4-27 21:28
迷幻的宇宙

是啊，带给人无限的想象{:4_187:}

红影 发表于 2024-4-27 22:47

马黑黑 发表于 2024-4-27 22:44
不错

能得到黑黑的认可，太开心了{:4_187:}

马黑黑 发表于 2024-4-27 22:49

红影 发表于 2024-4-27 22:47
能得到黑黑的认可，太开心了

{:4_203:}

小文 发表于 2024-4-27 22:53

红影 发表于 2024-4-27 21:19
谢谢小文鼓励，这个世界是浮幻的，如同在梦中一样

十分到位！妙极了！{:4_187:}

红影 发表于 2024-4-27 23:04

马黑黑 发表于 2024-4-27 22:49


谢谢黑黑的代码{:4_187:}

红影 发表于 2024-4-27 23:04

小文 发表于 2024-4-27 22:53
十分到位！妙极了！

我说的就是我们自己的世界啊，很虚幻{:4_173:}

马黑黑 发表于 2024-4-27 23:10

红影 发表于 2024-4-27 23:04
谢谢黑黑的代码

阔气阔气

红影 发表于 2024-4-28 11:08

马黑黑 发表于 2024-4-27 23:10
阔气阔气

我们跟着你学习，可以做很多喜欢的东西了呢{:4_187:}

马黑黑 发表于 2024-4-28 11:48

红影 发表于 2024-4-28 11:08
我们跟着你学习，可以做很多喜欢的东西了呢

也不是跟我学习，玩玩而已

红影 发表于 2024-4-28 12:16

马黑黑 发表于 2024-4-28 11:48
也不是跟我学习，玩玩而已

能者为师，就是跟着你学习呢{:4_187:}
页: [1]
查看完整版本: 《幻》（学习黑黑颗粒文字效果）