源

马黑黑

马黑黑

帖子代码

<style>
	#mydiv { margin: 30px 0 30px calc(50% - 513px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/4/origin.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; display: grid; place-items: center; position: relative; }
	#msvg { position: absolute; cursor: pointer; transform-origin: 0 100%; filter: drop-shadow(-5px -5px 10px black); }
	#msvg iamge { filter: hue-rotate(60deg); transition: .5s; }
	#msvg:hover image { filter: hue-rotate(240deg); }
	#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
	#fsbtn { position: absolute; bottom: 15px; color: white; padding: 2px 6px; border: 2px solid snow; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }
</style>

<div id="mydiv">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2610982608" autoplay loop></audio>
	<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/09/15/18/19/43/video65042fbf1f9fd.mp4" autoplay loop muted></video>
	<svg id="msvg" width="400" height="260"></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');

var tt = 6;
Array(tt).fill('').forEach((_,k) => {
	dr.image('https://638183.freep.cn/638183/web/svg/jupm.svg', k * 40, k * 10, 200, 200)
	dr.animate('animateTransform', {
		attributeName: 'transform',
		type: 'rotate',
		from: `0 ${100 + k * 40} ${100 + k * 10}`,
		to: `360 ${100 + k * 40} ${100 + k * 10}`,
		dur: Math.random() * 10 + 2 + 's',
		repeatCount: 'indefinite',
	});
});

msvg.onclick = () => {
	aud.paused ? (aud.play(), vid.play(), msvg.unpauseAnimations()) : (aud.pause(), vid.pause(), msvg.pauseAnimations());
};
fscreen.fs('mydiv', 'fsbtn');
aud.play().catch(_ => mState());
</script>

马黑黑

本帖配套 svgdr教程·图像元素 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! 做相应演示

杨帆

浩瀚宇宙，生命之源，谢谢马黑黑老师精彩分享

梦江南

谢谢黑黑老师辛苦！下午好！

愤怒的葡萄

银河系的外观，我们人类自己生存的星系。

樵歌

做出的都非常的有意境！多日不见，问好马老师。

红影

这个帖子是加图片的实例，通过让小播图图的移位，就得到了一组小播，这个漂亮

红影

转动的速度还各不相同，这样错落有致的小播，有种转动中的恍惚的移动感，真奇妙。

马黑黑

杨帆 发表于 2024-11-13 13:21
浩瀚宇宙，生命之源，谢谢马黑黑老师精彩分享

马黑黑

梦江南 发表于 2024-11-13 13:32
谢谢黑黑老师辛苦！下午好！

晚上好

马黑黑

愤怒的葡萄 发表于 2024-11-13 14:45
银河系的外观，我们人类自己生存的星系。

到此一游

马黑黑

樵歌 发表于 2024-11-13 16:26
做出的都非常的有意境！多日不见，问好马老师。

晚上嚎！
脖子还木好吗？可以学学这个小播，扭一扭，百病走

马黑黑

红影 发表于 2024-11-13 16:55
这个帖子是加图片的实例，通过让小播图图的移位，就得到了一组小播，这个漂亮

谢赞

马黑黑

红影 发表于 2024-11-13 16:58
转动的速度还各不相同，这样错落有致的小播，有种转动中的恍惚的移动感，真奇妙。

随机数，简单了

马黑黑

醉美水芙蓉 发表于 2024-11-13 19:19
欣赏老师带来的精彩！

泡沫

星空画面，加上这样梦幻光晕的动态视频感觉震撼。。。
这个音乐的节奏感也是独一无二的，好象有双音似的。听着很带劲

泡沫

小播用了今天图片元素添加，按照（图片地址，图片位置，图片大小排列）。
其中风车SVG图片复制6个，位置设置k * 40, k * 10,根据数量不同有所变化

泡沫

旋转用了昨天的animateTransform 动画，旋转点也进行了计算，与位置点呼应。
如果更改图片大小，旋转点也取其一半，才能有同样的旋转效果。。
而且每个风车转动的速度并不相同~~
小播触碰颜色有比较大的变化