晨光

马黑黑

马黑黑

帖子代码

<style>
	#mydiv { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/4/ifgl_133754971585727500.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; position: relative; --state: running; }
	#msvg { position: absolute; left: 50px; bottom: 20px; cursor: pointer; animation: rot 10s linear infinite var(--state); }
	#msvg:hover { transition: 1s; stroke: gray; }
	#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
	#fsbtn { position: absolute; left: 50%; bottom: 15px; color: white; 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=2154167645" autoplay loop></audio>
	<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/19/09/03/video6366444fa6565.mp4" autoplay loop muted></video>
	<svg id="msvg" width="200" height="200"></svg>
	<span id="fsbtn"></span>
</div>
 
<script  type="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr('msvg');

dr.pattern('p1', 0, 0, 0.1, 0.1);
dr.circle(10, 10, 5,'silver').addTo('p1');
dr.animate('animate', {
	attributeName: 'r',
	values: '6;5;6',
	dur: '.8s',
	repeatCount: 'indefinite'
});
dr.marker('m1', 5, 5, 2.5, 2.5).addTo('defs');
dr.circle(2.5, 2.5, 1.25, 'red').addTo('m1');
dr.animate('animate', {
	attributeName: 'fill',
	values: 'pink;red;pink',
	dur: '.5s',
	repeatCount: 'indefinite'
});

var tt = 8, r = 80, rad = 360 / tt * Math.PI / 180, dstr = '';

Array(tt).fill('').forEach((_, key) => {
	var x = 100 + r * Math.cos(rad * key), y = 100 + r * Math.sin(rad * key);
	dstr += key === tt - 1 ? `${x} ${y}` : `${x} ${y},`;
});
dr.polygon(dstr, 'url(#p1)', 'gray', 10).style('marker-mid: url(#m1); marker-end: url(#m1); stroke-dasharray: 10 2');

msvg.onclick = () => {
	msvg.style.setProperty('--state', ['paused','running'][+aud.paused]);
	aud.paused ? (aud.play(), vid.play(), msvg.unpauseAnimations()) : (aud.pause(), vid.pause(), msvg.pauseAnimations());
};

fscreen.fs('mydiv', 'fsbtn');

aud.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));
</script>

马黑黑

本帖配套 svgdr教程·装饰标签 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! 做演示

朵拉

这款动感阳光，精彩哈

愤怒的葡萄

挺漂亮的。

梦江南

真漂亮！

红影

这个组合很漂亮，而且鼠标触碰还发生边框变化，构思奇妙

红影

黑黑都是用较大的图图变小展示的，这样全屏的时候也不失真。
视频使用也很好看，和底图一脉相承，光影交织中带来奇妙的感受

马黑黑

红影 发表于 2024-11-8 15:30
黑黑都是用较大的图图变小展示的，这样全屏的时候也不失真。
视频使用也很好看，和底图一脉相承，光影交织 ...

像素要过得去

花飞飞

原来那些迷人的小红点是标记，我还以为是跟之前的天花板上的灯似的。。。。

马黑黑

花飞飞 发表于 2024-11-8 19:48
原来那些迷人的小红点是标记，我还以为是跟之前的天花板上的灯似的。。。。

嗯，不同的实现机制，不同的元素

花飞飞

还用到了昨天的多边形工具，整出一个虚线的8边形。。试了一下可以变成各种边形。。比如三边形
这个虚线的设置stroke-dasharray: 10 2，所以看上去跟五常大米一样长。。
教程里是stroke-dasharray: 8，间隔也是8就变成正方形小块了。

马黑黑

花飞飞 发表于 2024-11-8 19:52
还用到了昨天的多边形工具，整出一个虚线的8边形。。试了一下可以变成各种边形。。比如三边形
这个虚线的 ...

stroke-dasharray ，array 是数组的意思，这意味着，它接收的参数是一个数组，还挺复杂的。一般这么用相对简单：

stroke-dasharray: 4; //虚线长度4、间隔4
stroke-dasharray: 4 6; //虚线长度4、间隔6

花飞飞

这个贴子里的丁达尔光太立体了跟真的一样，
加了动态树枝越发自然好看，居然还有雾，真是晨曦~~美不胜收。。
看白老师的贴子就是一种享受，关键音乐也好听。

花飞飞

马黑黑 发表于 2024-11-8 19:52
嗯，不同的实现机制，不同的元素

看着效果差不多，实际上天差地别。。
你到底还有多少种方法没整出来。。

花飞飞

马黑黑 发表于 2024-11-8 19:54
stroke-dasharray ，array 是数组的意思，这意味着，它接收的参数是一个数组，还挺复杂的。一般这么用相 ...

这个参数的数组只有两个呀，比那个动不动就一个、二个、四个、六个、八个的友好多了。。

马黑黑

花飞飞 发表于 2024-11-8 20:13
这个参数的数组只有两个呀，比那个动不动就一个、二个、四个、六个、八个的友好多了。。

看你要设置成什么样纸：简单的就一个参数，两个也算简单，然后若需要更复杂的虚线样式，你得设置更多的值

马黑黑

花飞飞 发表于 2024-11-8 19:57
看着效果差不多，实际上天差地别。。
你到底还有多少种方法没整出来。。

不刻意去整这个

花飞飞

马黑黑 发表于 2024-11-8 21:12
看你要设置成什么样纸：简单的就一个参数，两个也算简单，然后若需要更复杂的虚线样式，你得设置更多的值

更复杂的我到想看看~~虽然目前的两个参数的就够用了

花飞飞

马黑黑 发表于 2024-11-8 21:12
不刻意去整这个

回字有多少种写法一样无意义