Floverdance
本帖最后由 马黑黑 于 2024-11-4 08:48 编辑 <br /><br /><style>#mydiv { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/webp2/flover.webp') no-repeat center/cover; box-shadow: 4px 4px 8px gray; overflow: hidden; z-index: 1; position: relative; --state: running; }
#msvg { position: absolute; left: calc(50% - 100px); top: 40px; cursor: pointer; transition: .6s; animation: rot 8s linear infinite var(--state); }
#msvg:hover { filter: invert(100%) drop-shadow(0 0 60px white); }
#vid { position: absolute; top: -35%; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
#fsbtn { position: absolute; left: 48%; bottom: 20px; color: snow; background: #333333ac; padding: 4px 6px; border: 2px solid snow; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }
@keyframes rot { to { transform: rotate(-360deg); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=509531501" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/30/45/62bac706237f8.mp4" autoplay loop muted></video>
<svg id="msvg" width="200" height="200" viewBox="-100 -100 200 200" xmlns="http://www.w3.org/2000/svg">
<span id="fsbtn"></span>
</div>
<scripttype="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = _dr('msvg');
var total = 12;
for(var i = 0; i < total; i ++) {
var deg = 360 / total * i, color = '#' + Math.random().toString(16).substring(2,8) + 'ec';
dr.polygon('0 -80, -10 -60, 0 0, 10 -60', color).transform(`rotate(${deg}) translate(0 -6)`);
}
dr.circle(0, 0, 6, 'yellow');
msvg.onclick = () => {
msvg.style.setProperty('--state', ['paused','running'][+aud.paused]);
aud.paused ? (aud.play(), vid.play()) : (aud.pause(), vid.pause());
};
aud.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));
fscreen.fs('mydiv', 'fsbtn');
</script>
本帖最后由 马黑黑 于 2024-11-4 08:50 编辑 <br /><br /><h2>帖子代码</h2>
<div id="hEdiv"><pre id="hEpre">
<style>
#mydiv { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/webp2/flover.webp') no-repeat center/cover; box-shadow: 4px 4px 8px gray; overflow: hidden; z-index: 1; position: relative; --state: running; }
#msvg { position: absolute; left: calc(50% - 100px); top: 40px; cursor: pointer; transition: .6s; animation: rot 8s linear infinite var(--state); }
#msvg:hover { filter: invert(100%) drop-shadow(0 0 60px white); }
#vid { position: absolute; top: -35%; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
#fsbtn { position: absolute; left: 48%; bottom: 20px; color: snow; background: #333333ac; padding: 4px 6px; border: 2px solid snow; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }
@keyframes rot { to { transform: rotate(-360deg); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=509531501" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/30/45/62bac706237f8.mp4" autoplay loop muted></video>
<svg id="msvg" width="200" height="200" viewBox="-100 -100 200 200" xmlns="http://www.w3.org/2000/svg">
<span id="fsbtn"></span>
</div>
<scripttype="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = draw.dr('msvg');
//var dr = _dr('msvg'); //酱紫也可以
var total = 12;
for(var i = 0; i < total; i ++) {
var deg = 360 / total * i, color = '#' + Math.random().toString(16).substring(2,8) + 'ec';
dr.polygon('0 -80, -10 -60, 0 0, 10 -60', color).transform(`rotate(${deg}) translate(0 -6)`);
}
dr.circle(0, 0, 6, 'yellow');
msvg.onclick = () => {
msvg.style.setProperty('--state', ['paused','running'][+aud.paused]);
aud.paused ? (aud.play(), vid.play()) : (aud.pause(), vid.pause());
};
aud.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));
fscreen.fs('mydiv', 'fsbtn');
</script>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script> 本帖配合 svgdr教程·画多边形 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! 做演示
老师早上好！我来听老师讲代码。 如此绚丽多彩的背景，配合这样随机色的多边形小播，真漂亮{:4_199:} 小播鼠标触碰还有滤镜和阴影变化呢，中间还给它加了个黄色圆点，更漂亮了{:4_199:} 黑黑的每节课程不但有详细讲解，还有实例，太赞了{:4_199:} 红影 发表于 2024-11-4 10:06
黑黑的每节课程不但有详细讲解，还有实例，太赞了
感谢支持 梦江南 发表于 2024-11-4 08:58
老师早上好！我来听老师讲代码。
{:4_190:} 红影 发表于 2024-11-4 10:04
小播鼠标触碰还有滤镜和阴影变化呢，中间还给它加了个黄色圆点，更漂亮了
{:4_191:} 红影 发表于 2024-11-4 09:59
如此绚丽多彩的背景，配合这样随机色的多边形小播，真漂亮
{:4_187:} 马黑黑 发表于 2024-11-4 12:01
感谢支持
才发现引用js的方式和以前不一样了呢，不使用var sc也不用appendChild(sc)了，直接import draw from 就引过来了，sc.onload = () =>也不用了，直接就用，太方便了{:4_199:} 马黑黑 发表于 2024-11-4 12:03
不知道以前的js是不是都能这样用{:4_204:} 马黑黑 发表于 2024-11-4 12:03
好像也不用dr.g('g1').addTo('defs');添加分组了，感觉这个帖子特别直接方便呢。
var dr = draw.dr('msvg');
//var dr = _dr('msvg'); //酱紫也可以 而且这两个写法也都行。 红影 发表于 2024-11-4 18:08
好像也不用dr.g('g1').addTo('defs');添加分组了，感觉这个帖子特别直接方便呢。
var dr = draw.dr('msv ...
分组与否是看情况而定。像这个帖子，它就是在svg画布上画一个由多边形组成的图案，外加一个小圆，结构上比较简单，无需分组。分组更多的时候是为了引用或为了好管理。 马黑黑 发表于 2024-11-4 19:13
分组与否是看情况而定。像这个帖子，它就是在svg画布上画一个由多边形组成的图案，外加一个小圆，结构上 ...
虽然分组有好处，但简约的代码看着更清晰{:4_187:} 红影 发表于 2024-11-4 18:04
不知道以前的js是不是都能这样用
不一定都行。这要额外加工过。插件的 export 导出，需要另外做一个封装。svgdr.js 以插件形式开发，它不能直接 export（导出）和被 import（导入），而是在插件的基础上再做一个输出函数，这个函数非常简短，如果是用箭头函数的话也就一句代码，然后再使用 export 模块导出该函数，这个函数就可以被 import 了。
如果你注意观察，引用插件的地址是不同的，前面的引用在论坛需要 createElement 方法，它的地址指向的js插件是不能被 import的；这一帖则使用了一个新的地址，插件做了 export 封装。 红影 发表于 2024-11-4 19:17
虽然分组有好处，但简约的代码看着更清晰
一切看情况，能不分组就不分，不分组做不好就分。 红影 发表于 2024-11-4 18:04
才发现引用js的方式和以前不一样了呢，不使用var sc也不用appendChild(sc)了，直接import draw from 就引 ...
前提是浏览器要支持ES6，不过绝大多数现代浏览器都完美支持 黑黑太勤奋了，每天精彩不断，分享不停，太厉害了{:4_178:}