论坛 › 动画音画 › 真实与谎言

马黑黑 发表于 2025-8-5 12:28

真实与谎言

<style>
    @import 'https://638183.freep.cn/638183/web/css/tz01.css';
    #pa { --offsetX: 81px; --bg: url('https://img.shetu66.com/2023/06/29/1688025012523974.png') no-repeat center/cover; --ma-size: 100%; }
    .wrap { position: absolute; bottom: 200px; aspect-ratio: 1/1; width: 15%; filter: drop-shadow(0 240px 10px rgba(0,0,0,.5)); }
    .son { position: absolute; top: 40%; width: 50%; height: 10%; background: linear-gradient(75deg, olive, snow, tan); border-radius: 100% 0; box-shadow: 0 0 200px cyan; transform-origin: 100% 100%; }
    #btnFs { right: 20px; top: 20px; color: #eee; }
</style>
<div id="pa">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=4437303" autoplay loop></audio>
    <video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/09/25/19/16/19/video65116c038ae4b.mp4" autoplay loop muted></video>
    <div class="wrap">
      <div id="ma" class="hue-rotate"></div>
    </div>
</div>
<script type="module">
    import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
    FS(pa, ma);
    const tt = 12;
        Array.from({length: tt}).forEach( (s, k) => {
                s = document.createElement('span');
                s.className = 'son';
                s.style.setProperty('transform', `rotate(${360 / tt * k}deg) translate(-8px)`);
                ma.appendChild(s);
        });
</script>

马黑黑 发表于 2025-8-5 12:29

本帖最后由 马黑黑 于 2025-8-5 13:20 编辑 <br /><br /><div class="codebox">
&lt;style&gt;
    @import 'https://638183.freep.cn/638183/web/css/tz01.css';
    #pa { --offsetX: 81px; --bg: url('https://img.shetu66.com/2023/06/29/1688025012523974.png') no-repeat center/cover; --ma-size: 100%; }
    .wrap { position: absolute; bottom: 200px; aspect-ratio: 1/1; width: 15%; filter: drop-shadow(0 240px 10px rgba(0,0,0,.5)); }
    .son { position: absolute; top: 40%; width: 50%; height: 10%; background: linear-gradient(75deg, olive, snow, tan); border-radius: 100% 0; box-shadow: 0 0 200px cyan; transform-origin: 100% 100%; }
    #btnFs { right: 20px; top: 20px; color: #eee; }
&lt;/style&gt;

&lt;div id="pa"&gt;
    &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=4437303" autoplay loop&gt;&lt;/audio&gt;
    &lt;video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/09/25/19/16/19/video65116c038ae4b.mp4" autoplay loop muted&gt;&lt;/video&gt;
    &lt;div class="wrap"&gt;
      &lt;div id="ma" class="hue-rotate"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script type="module"&gt;
    import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
    FS(pa, ma);
    const tt = 12;
        Array.from({length: tt}).forEach( (s, k) =&gt; {
                s = document.createElement('span');
                s.className = 'son';
                s.style.setProperty('transform', `rotate(${360 / tt * k}deg) translate(-8px)`);
                ma.appendChild(s);
        });
&lt;/script&gt;
</div>

<script type="module">
        import linenum from 'https://638183.freep.cn/638183/web/js/linenum.js';
        linenum();
</script>

红影 发表于 2025-8-5 13:53

马黑黑 发表于 2025-8-5 12:29
本帖最后由 马黑黑 于 2025-8-5 13:20 编辑
&lt;style&gt;
    @import 'https://638183.freep.cn/638183 ...

这代码不但有序号，还可以加底色呢，更清晰了{:4_187:}

红影 发表于 2025-8-5 13:54

小播选择了触碰的色相变化。封装带来的好处，想用哪个触碰效果就是哪个呢{:4_187:}

花飞飞 发表于 2025-8-5 15:40

这种叶片的刚跟过一个，有点熟悉的感觉。。。。
叶片的背景没有用图片，用了75度角三种颜色的线性渐变{:4_173:}裁切的方式也只用两个数据。。
叶片数量也可随意变化，好用得很

花飞飞 发表于 2025-8-5 15:42

色彩和排列形成独特的奇观，整个组成好象是向外伸展的立体花朵。。。
触碰后颜色有蓝绿粉三种变化，灵动，颜值高

花飞飞 发表于 2025-8-5 15:43

本帖最后由 花飞飞 于 2025-8-5 16:29 编辑

画面如仙境，像是看大片。音乐轻柔舒缓，很安静的感觉{:4_173:}

马黑黑 发表于 2025-8-5 18:33

花飞飞 发表于 2025-8-5 15:43
画面如仙境，像是看大片。音乐轻柔舒缓，很安静的感觉

音乐挺好的

杨帆 发表于 2025-8-5 18:47

漂亮！谢谢马老师精彩分享{:4_190:}

花飞飞 发表于 2025-8-5 20:26

马黑黑 发表于 2025-8-5 18:33
音乐挺好的

标题也不错，看着就想进来一探究竟{:4_173:}是音乐名么？

马黑黑 发表于 2025-8-5 20:45

花飞飞 发表于 2025-8-5 20:26
标题也不错，看着就想进来一探究竟是音乐名么？

是的

马黑黑 发表于 2025-8-5 20:50

杨帆 发表于 2025-8-5 18:47
漂亮！谢谢马老师精彩分享

{:4_190:}

花飞飞 发表于 2025-8-6 09:09

马黑黑 发表于 2025-8-5 20:45
是的

跟了一个作业，好象封了标题文字，没有歌 词版{:4_173:}

梦江南 发表于 2025-8-6 10:00

真漂亮，这帖歌曲温柔了。{:4_190:}

马黑黑 发表于 2025-8-6 12:33

梦江南 发表于 2025-8-6 10:00
真漂亮，这帖歌曲温柔了。
歌曲好听吧？经典的

马黑黑 发表于 2025-8-6 12:33

花飞飞 发表于 2025-8-6 09:09
跟了一个作业，好象封了标题文字，没有歌 词版

这个不做歌词同步的。歌词同步是前面那么些模块

马黑黑 发表于 2025-8-6 12:40

花飞飞 发表于 2025-8-6 09:09
跟了一个作业，好象封了标题文字，没有歌 词版

最近做的都不带歌词同步功能。歌词同步功能模块已经够用了

梦江南 发表于 2025-8-6 14:25

马黑黑 发表于 2025-8-6 12:33
歌曲好听吧？经典的

老师是怎么在163上找到的呢？现在163云网页要扫描才能可以搜索歌曲。

花飞飞 发表于 2025-8-6 18:05

马黑黑 发表于 2025-8-6 12:33
这个不做歌词同步的。歌词同步是前面那么些模块

好哒，记得之前有不少带歌词的模块。。纯音的，歌词的都成双出现

花飞飞 发表于 2025-8-6 18:06

马黑黑 发表于 2025-8-6 12:40
最近做的都不带歌词同步功能。歌词同步功能模块已经够用了

又喜欢这个小播又想要歌词，就自己移植好了{:4_170:}

查看完整版本: 真实与谎言