源 - 动画音画 - 花潮论坛 - Powered by Discuz! Archiver

马黑黑 发表于 2024-11-13 12:26

源

马黑黑 发表于 2024-11-13 12:27

<h2>帖子代码</h2>
<div id="hEdiv"><pre id="hEpre">
<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>

<scripttype="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>
</pre></div>

<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script>

马黑黑 发表于 2024-11-13 12:31

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

杨帆发表于 2024-11-13 13:21

浩瀚宇宙，生命之源，谢谢马黑黑老师精彩分享{:4_190:}

梦江南 发表于 2024-11-13 13:32

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

愤怒的葡萄 发表于 2024-11-13 14:45

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

樵歌发表于 2024-11-13 16:26

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

红影发表于 2024-11-13 16:55

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

红影发表于 2024-11-13 16:58

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

马黑黑 发表于 2024-11-13 19:01

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

{:4_191:}

马黑黑 发表于 2024-11-13 19:01

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

晚上好

马黑黑 发表于 2024-11-13 19:02

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

到此一游{:4_170:}

马黑黑 发表于 2024-11-13 19:03

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

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

马黑黑 发表于 2024-11-13 19:03

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

谢赞

马黑黑 发表于 2024-11-13 19:04

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

随机数，简单了

醉美水芙蓉 发表于 2024-11-13 19:19

马黑黑 发表于 2024-11-13 19:19

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

{:4_190:}

泡沫发表于 2024-11-13 19:46

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

泡沫发表于 2024-11-13 19:53

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

泡沫发表于 2024-11-13 20:00

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

页: [1] 2 3

花潮论坛's Archiver

源