小辣椒 发表于 2024-2-4 20:00

画你 TO：千羽 （学习黑黑辞花歌词同步效果）

<style>
        #papa { margin: 150px 0 0 calc(50% - 721px); width: 1280px; height: 721px; position: relative; background: silver url('https://xlaj.cn/assets/file/zp/20240204103144.gif') no-repeat center/cover; box-shadow: 4px 4px 8px rgba(0,0,0,.6); overflow: hidden; display: grid; place-items: center; --state: paused; }
        #mplayer { position: absolute; bottom: 15px; text-align: center; color: #fff; }
        #mplayer p { margin: 0; padding: 0; cursor: pointer; }
        #mprog { width: 240px; accent-color: White; outline: none; cursor: pointer; }
        #btnplay { width: 60px; animation: rotating 6s infinite linear var(--state); }
        #lrc { --motion: cover2; --tt: 1s; --bg: repeating-linear-gradient(135deg, DarkSeaGreen 1px, SeaGreen 6px); position: absolute; left: 100px;top: 25px; font: bold 1.8em sans-serif; color: hsl(10, 10%, 90%); white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 100%, 0%, .85)); pointer-events: none; z-index: 900; }
        #lrc::before { position: absolute; content: attr(data-lrc); width: 0%; height: 100%; color: transparent; border-bottom: 6px dotted ForestGreen; overflow: hidden; white-space: pre; background: var(--bg); filter: inherit; background-clip: text; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
        #vid { position: absolute; width: 500px; height: 350px; object-fit: cover; aspect-ratio: 1; border-radius: 30%; filter: drop-shadow(3px 4px 20px #000); mix-blend-mode: soft-light; cursor: pointer; }
        @keyframes cover1 { from { width: 0%; }to { width: 100%; } }
        @keyframes cover2 { from { width: 0%; }to { width: 100%; } }
        @keyframes rotating { to { transform: rotate(360deg); } }

#dt3{ position: absolute; width:313px; height: 228px; top: -2px; left: 854px; }

</style>

<div id="papa">

<img id="dt3" src="https://xlaj.cn/assets/file/zp/20240204103109.png" alt="" />
        <audio src="https://aod.cos.tx.xmcdn.com/storages/ff73-audiofreehighqps/9F/55/GKwRIRwJk2ADACAAAAKkDdUZ.m4a" autoplay loop></audio>
        <video id="vid" src="https://lk999.oss-cn-guangzhou.aliyuncs.com/dbd.mp4" loop muted oncontextmenu="return false"></video>
        <div id="mplayer">
                <p><img id="btnplay" src="https://638183.freep.cn/638183/t23/btn/meihua_133482968750383750.png" title="播放/暂停" alt="" /></p>
                <p>
                        <output id="mcur">0:00</output>
                        <input id="mprog" type="range" min="0" step="any" max="100" value="0" title="调节进度" />
                        <output id="mdu">0:00</output>
                </p>
        </div>
        <div id="lrc" data-lrc="HuaChao LRC Player">HuaChao LRC Player</div>
</div>

<script>
        var geci = [ ,
                ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
        var sf = document.createElement('script');
        sf.src = 'https://638183.freep.cn/638183/web/js/lrcku_range.js';
        sf.charset = 'utf-8';
        document.querySelector('body').appendChild(sf);
        vid.onclick = (e) => aud.paused ? aud.play() : aud.pause();
</script>

小辣椒 发表于 2024-2-4 20:01

《画你》是最近网络很火的一首草原情歌，想到草原情歌就去找了几年前岁月做的草原风动粒子效果，配这个草原情歌刚好

走过岁月 发表于 2024-2-4 20:01

刚好有个沙发

走过岁月 发表于 2024-2-4 20:01

坐下慢慢欣赏

小辣椒 发表于 2024-2-4 20:01

@千羽   好久没有碰到你了，最近好吧，想你的{:4_179:}

小辣椒 发表于 2024-2-4 20:02

@马黑黑

感谢黑黑教程分享，小辣椒套用玩一个

小辣椒 发表于 2024-2-4 20:04

走过岁月 发表于 2024-2-4 20:01
刚好有个沙发

岁月来了，刚好碰到{:4_179:}

走过岁月 发表于 2024-2-4 20:05

小辣椒 发表于 2024-2-4 20:04
岁月来了，刚好碰到

刚来 {:4_179:}

小辣椒 发表于 2024-2-4 20:05

走过岁月 发表于 2024-2-4 20:01
坐下慢慢欣赏
用了你二个效果，一个是几年前的草原风动的粒子效果，一个是中间人物视频效果

小辣椒 发表于 2024-2-4 20:07

走过岁月 发表于 2024-2-4 20:05
刚来

岁月我发了帖，得马上下了，早点休息了

走过岁月 发表于 2024-2-4 20:15

小辣椒 发表于 2024-2-4 20:05
用了你二个效果，一个是几年前的草原风动的粒子效果，一个是中间人物视频效果

做的不错

走过岁月 发表于 2024-2-4 20:15

小辣椒 发表于 2024-2-4 20:07
岁月我发了帖，得马上下了，早点休息了

好的

樵歌 发表于 2024-2-4 20:45

活学活用的好孩纸{:4_204:}
做得太漂亮了樵哥哥特别喜欢。{:4_174:}

樵歌 发表于 2024-2-4 20:47

不知道用啥色，发觉坛上精华贴深青色用得太多了。

樵歌 发表于 2024-2-4 20:48

@千羽 快来收礼哈

亦是金 发表于 2024-2-4 20:52

帖子制作漂亮，欣赏点赞！{:4_187:}

红影 发表于 2024-2-4 21:14

这个帖子的制作很灵动，美丽的大草原，美丽的人物风情。
欣赏亲爱的精美制作{:4_199:}

红影 发表于 2024-2-4 21:16

这些动态运用真美。千羽收礼开心{:4_187:}

流水光阴 发表于 2024-2-5 10:37

好看，好听

流水光阴 发表于 2024-2-5 10:37

喜欢这首画你，感觉男声更加好听
页: [1] 2 3 4
查看完整版本: 画你 TO：千羽 （学习黑黑辞花歌词同步效果）