论坛 › 动画音画 › Walls

马黑黑 发表于 2025-1-9 12:39

Walls

<style>
        @import 'https://638183.freep.cn/638183/web/mod/button.css';
        #tz { --state: running; margin: 30px 0 30px calc(50% - 593px); background: url('https://638183.freep.cn/638183/t24/1/cyan.jpg') no-repeat center/cover; }
        #fsbtn { bottom: 20px; }
</style>

<div id="tz" class="pa">
        <audio src="https://music.163.com/song/media/outer/url?id=2116597317"></audio>
        <video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/09/26/17/02/39/video66f5232fb7a08.mp4" autoplay loop muted></video>
        <div id="fsbtn" class="fsbtn"></div>
        <svg id="msvg" class="mplayer" width="200" height="200"></svg>
</div>

<script type="module">
        import { hcplay } from 'https://638183.freep.cn/638183/web/mod/button.js';
        import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
        import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
        var dr = Dr.dr('msvg');
        var all = 30, a = 360 / all;
        dr.symbol('sym','-100 -100 200 200');
        for(var i = 0; i < all; i ++) {
                var c = Math.random().toString(16).substring(2,8)
                dr.path('M0 0 Q10 -100,80 0','none',`#${c}`,3).transform(`rotate(${i * a},0,0) translate(20)`).addTo('sym');
        }
        dr.use('#sym',0,0,200,200);
        hcplay(tz);
        fscreen.fs(tz, fsbtn);
</script>

马黑黑 发表于 2025-1-9 12:39

<h2>帖子代码</h2>
<div id="hEdiv"><pre id="hEpre">
&lt;style&gt;
        @import 'https://638183.freep.cn/638183/web/mod/button.css';
        #tz { --state: running; margin: 30px 0 30px calc(50% - 593px); background: url('https://638183.freep.cn/638183/t24/1/cyan.jpg') no-repeat center/cover; }
        #fsbtn { bottom: 20px; }
&lt;/style&gt;

&lt;div id="tz" class="pa"&gt;
        &lt;audio src="https://music.163.com/song/media/outer/url?id=2116597317"&gt;&lt;/audio&gt;
        &lt;video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/09/26/17/02/39/video66f5232fb7a08.mp4" autoplay loop muted&gt;&lt;/video&gt;
        &lt;div id="fsbtn" class="fsbtn"&gt;&lt;/div&gt;
        &lt;svg id="msvg" class="mplayer" width="200" height="200"&gt;&lt;/svg&gt;
&lt;/div&gt;

&lt;script type="module"&gt;
        import { hcplay } from 'https://638183.freep.cn/638183/web/mod/button.js';
        import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
        import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
        var dr = Dr.dr('msvg');
        var all = 30, a = 360 / all;
        dr.symbol('sym','-100 -100 200 200');
        for(var i = 0; i &lt; all; i ++) {
                var c = Math.random().toString(16).substring(2,8)
                dr.path('M0 0 Q10 -100,80 0','none',`#${c}`,3).transform(`rotate(${i * a},0,0) translate(20)`).addTo('sym');
        }
        dr.use('#sym',0,0,200,200);
        hcplay(tz);
        fscreen.fs(tz, fsbtn);
&lt;/script&gt;
</pre></div>

<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script>

梦江南 发表于 2025-1-9 14:32

欣赏老师新作，学习了。

朵拉 发表于 2025-1-9 15:49

漂亮，欣赏学习了{:4_178:}

老谟深虑 发表于 2025-1-9 18:10

          一加分，按钮就没了，刷新又出现。欣赏老师的佳作！

马黑黑 发表于 2025-1-9 19:30

老谟深虑 发表于 2025-1-9 18:10
一加分，按钮就没了，刷新又出现。欣赏老师的佳作！

论坛程序对es6模块就是酱紫：程序是过去开发的，对新东东有点不太适应

红影 发表于 2025-1-9 20:13

这个小播真漂亮，简单的路径构成的图案，组合起来竟真美呢。鼠标触动还能高亮{:4_187:}

红影 发表于 2025-1-9 20:14

制作也很漂亮，这个视频的使用让背景也有要动起来的感觉呢{:4_199:}

马黑黑 发表于 2025-1-9 20:59

红影 发表于 2025-1-9 20:14
制作也很漂亮，这个视频的使用让背景也有要动起来的感觉呢

{:4_190:}

马黑黑 发表于 2025-1-9 21:00

红影 发表于 2025-1-9 20:13
这个小播真漂亮，简单的路径构成的图案，组合起来竟真美呢。鼠标触动还能高亮

高亮是模块的效果

红影 发表于 2025-1-9 21:48

马黑黑 发表于 2025-1-9 20:59


很漂亮的制作{:4_187:}

红影 发表于 2025-1-9 21:49

马黑黑 发表于 2025-1-9 21:00
高亮是模块的效果

不管是什么弄的，效果很不错呢{:4_187:}

马黑黑 发表于 2025-1-9 22:59

红影 发表于 2025-1-9 21:49
不管是什么弄的，效果很不错呢

还行

马黑黑 发表于 2025-1-9 22:59

红影 发表于 2025-1-9 21:48
很漂亮的制作

谢花

杨帆 发表于 2025-1-9 23:46

漂亮！谢谢老师经典分享{:4_191:}

红影 发表于 2025-1-10 12:23

马黑黑 发表于 2025-1-9 22:59
还行

黑黑设计的东西总是很漂亮呢{:4_187:}

马黑黑 发表于 2025-1-10 12:56

红影 发表于 2025-1-10 12:23
黑黑设计的东西总是很漂亮呢

这夸奖也太夸张了

马黑黑 发表于 2025-1-10 13:00

杨帆 发表于 2025-1-9 23:46
漂亮！谢谢老师经典分享

{:4_190:}

小辣椒 发表于 2025-1-10 13:06

黑黑这个里面有3个js 一个css，懒人们幸福S了{:4_170:}

小辣椒 发表于 2025-1-10 13:08

其实现在黑黑的教程套用是根本不用动脑子了，但加效果还是有一点难度哦对

查看完整版本: Walls