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> <div class="codebox">
<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>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 本帖利用 srvdr 实时制作 svg 播放按钮。当然也可以不适用 svgdr，手工制作 svg 或借助JS协助制作。
实时 制作svg元素的好处是，形状、尺寸、颜色等可以任意更改，不足是得额外添加不少代码。svgdr 的作用之一就是尽可能减少代码量。 黑黑你速度真快哦，一眨眼又是一个新产品出来了{:4_170:} 现在的代码都不多，内容又不少，效果还很酷炫，黑黑是越来越厉害了{:4_178:} 马黑黑 发表于 2025-8-21 12:34
本帖利用 srvdr 实时制作 svg 播放按钮。当然也可以不适用 svgdr，手工制作 svg 或借助JS协助制作。
实 ...
还是需要自己添加代码制作？ 这个帖子把之前封装的svgdr.js 也充分利用起来，可以任意设计想要的图案了，真好{:4_187:} 使用 /tz01.css 封装，虽然没有#ma了，依然可以使用 class="hue-rotate" 呢。{:4_204:} 这个背景也是多个背景融合，第二个背景动态SVG图片暂停时会被隐去，对 background-blend-mode 属性的完美运用{:4_199:} 红影 发表于 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 也充分利用起来，可以任意设计想要的图案了，真好
那个一直也没什么人去玩{:4_170:} 小辣椒 发表于 2025-8-21 12:51
还是需要自己添加代码制作？
这个完全可以，也可以模仿本帖的样纸去做 小辣椒 发表于 2025-8-21 12:50
现在的代码都不多，内容又不少，效果还很酷炫，黑黑是越来越厉害了
谢赞 马黑黑 发表于 2025-8-21 13:06
上一个帖子用到的
是的，在这个帖子里又用到了。 马黑黑 发表于 2025-8-21 13:06
class选择器是给任何元素使用的
嗯嗯，通过这个帖子这样用，就更清楚了。{:4_187:} 马黑黑 发表于 2025-8-21 13:07
那个一直也没什么人去玩
主要svg本身就不容易，学起来有点吃力。 红影 发表于 2025-8-21 15:38
主要svg本身就不容易，学起来有点吃力。
画基本图形总还是可以学一学的 红影 发表于 2025-8-21 15:37
嗯嗯，通过这个帖子这样用，就更清楚了。
class选择器可以重用，张三李四标签爱用就用，王五要用也一样 红影 发表于 2025-8-21 15:36
是的，在这个帖子里又用到了。
好用多用