History of Love

马黑黑

马黑黑

<style> @import 'https://638183.freep.cn/638183/web/css/tz01.css'; #pa { --offsetX: 81px; --bg:url('https://638183.freep.cn/638183/t24/w5/bgirl.webp') no-repeat center/cover, url('https://638183.freep.cn/638183/web/svg/updwonballs.svg') no-repeat center/100% 100%; --mode: hue; background-blend-mode: var(--mode); } #btnFs { right: 30px; bottom: 30px; color: #eee; } #msvg { position: absolute; left: 30px; bottom: 30px; cursor: pointer; animation: rotate 10s linear infinite var(--state); } </style> <div id="pa"> <audio id="audio" src="https://music.163.com/song/media/outer/url?id=1952483703" autoplay loop></audio> <video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/05/13/15/25/20/video6822f3e0d18c7.mp4" autoplay loop muted></video> <svg id="msvg" class="hue-rotate" width="200" height="200"><title>ALT+X</title></svg> </div> <script type="module"> import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js'; import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js'; const dr = Dr.dr(msvg); Array.from({length: 7}).forEach((_,k) => { dr.polygon('100 100, 80 5, 100 20, 120 5','white','firebrick', 3).transform(`rotate(${360 / 7 * k} 100 100)`); }); audio.onplaying = audio.onpause = () => { pa.style.setProperty('--mode', audio.paused ? 'normal' : 'hue'); }; FS(pa, msvg); </script>

马黑黑

本帖利用 srvdr 实时制作 svg 播放按钮。当然也可以不适用 svgdr，手工制作 svg 或借助JS协助制作。

实时 制作svg元素的好处是，形状、尺寸、颜色等可以任意更改，不足是得额外添加不少代码。svgdr 的作用之一就是尽可能减少代码量。

小辣椒

黑黑你速度真快哦，一眨眼又是一个新产品出来了

小辣椒

现在的代码都不多，内容又不少，效果还很酷炫，黑黑是越来越厉害了

小辣椒

马黑黑 发表于 2025-8-21 12:34
本帖利用 srvdr 实时制作 svg 播放按钮。当然也可以不适用 svgdr，手工制作 svg 或借助JS协助制作。

实 ...

还是需要自己添加代码制作？

红影

这个帖子把之前封装的svgdr.js 也充分利用起来，可以任意设计想要的图案了，真好

红影

使用 /tz01.css 封装，虽然没有#ma了，依然可以使用 class="hue-rotate" 呢。

红影

这个背景也是多个背景融合，第二个背景动态SVG图片暂停时会被隐去，对 background-blend-mode 属性的完美运用

马黑黑

红影 发表于 2025-8-21 13:04
这个背景也是多个背景融合，第二个背景动态SVG图片暂停时会被隐去，对 background-blend-mode 属性的完美运 ...

上一个帖子用到的

马黑黑

红影 发表于 2025-8-21 13:01
使用 /tz01.css 封装，虽然没有#ma了，依然可以使用 class="hue-rotate" 呢。

class选择器是给任何元素使用的

马黑黑

红影 发表于 2025-8-21 13:00
这个帖子把之前封装的svgdr.js 也充分利用起来，可以任意设计想要的图案了，真好

那个一直也没什么人去玩

马黑黑

小辣椒 发表于 2025-8-21 12:51
还是需要自己添加代码制作？

这个完全可以，也可以模仿本帖的样纸去做

马黑黑

小辣椒 发表于 2025-8-21 12:50
现在的代码都不多，内容又不少，效果还很酷炫，黑黑是越来越厉害了

谢赞

红影

马黑黑 发表于 2025-8-21 13:06
上一个帖子用到的

是的，在这个帖子里又用到了。

红影

马黑黑 发表于 2025-8-21 13:06
class选择器是给任何元素使用的

嗯嗯，通过这个帖子这样用，就更清楚了。

红影

马黑黑 发表于 2025-8-21 13:07
那个一直也没什么人去玩

主要svg本身就不容易，学起来有点吃力。

马黑黑

红影 发表于 2025-8-21 15:38
主要svg本身就不容易，学起来有点吃力。

画基本图形总还是可以学一学的

马黑黑

红影 发表于 2025-8-21 15:37
嗯嗯，通过这个帖子这样用，就更清楚了。

class选择器可以重用，张三李四标签爱用就用，王五要用也一样

马黑黑

红影 发表于 2025-8-21 15:36
是的，在这个帖子里又用到了。

好用多用