天湖 （ 学习黑黑老师的源代码）
<style>#mydiv { margin: 30px 0 30px calc(50% - 585px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/673713efd29ded1a8c8118f1.gif') 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>
<img style="position:absolute; left: 60%; top: 20%;" width=300 height=200src="https://img.fy6b.com/2023/05/04/5369a491b05f6.gif
"></img>
<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> 欣赏佳作，问候梦江南。 赞！
新手评分有点少{:5_102:} 为是个大学霸，马老师才讲，优秀作业就做了。 哇，这个太有趣了，那只老虎在对着播放器群组发脾气么{:4_173:} 这个构思有趣，把这群小播放在这背景上更漂亮呢。
欣赏江南好帖{:4_199:} 这老虎太有趣了，它喊了半天小播也不听，还是需要我们点一下小播才会停{:4_170:} 梦油 发表于 2024-11-15 17:47
欣赏佳作，问候梦江南。
早上好，谢谢梦油老师沙发支持。 夕阳黄昏 发表于 2024-11-15 18:03
赞！
新手评分有点少
没事，顶帖就是最大的支持。谢谢老师！ 樵歌 发表于 2024-11-15 18:58
为是个大学霸，马老师才讲，优秀作业就做了。
问好樵歌老师，谢谢欣赏支持。祝您健康平安！
红影 发表于 2024-11-15 20:30
哇，这个太有趣了，那只老虎在对着播放器群组发脾气么
黑黑老师的这帖代码，我找不到向左移向下移的代码。老师的这播放器像琅牙榜，本来我想做一帖琅牙榜的，播放器移不动，只好做这一帖了。为了加上这只老虎，还费了不少时间呢。 红影 发表于 2024-11-15 20:35
这个构思有趣，把这群小播放在这背景上更漂亮呢。
欣赏江南好帖
谢谢影子欣赏支持，周末快乐！{:4_204:} 红影 发表于 2024-11-15 20:38
这老虎太有趣了，它喊了半天小播也不听，还是需要我们点一下小播才会停
为了寻找这只老虎的样子，真的是开了脑洞。它的这种发怒的样子是我想要的。 梦江南 发表于 2024-11-16 08:17
黑黑老师的这帖代码，我找不到向左移向下移的代码。老师的这播放器像琅牙榜，本来我想做一帖琅牙榜的，播 ...
是不是那一串像风车一样的图形？ 在 #msvg 里加定位即可。 夕阳黄昏 发表于 2024-11-16 08:28
是不是那一串像风车一样的图形？ 在 #msvg 里加定位即可。
是的，#msvg 里找过加不进去。{:4_201:} 梦江南 发表于 2024-11-16 12:33
是的，#msvg 里找过加不进去。
#msvg { position: absolute; cursor: pointer; transform-origin: 0 100%; filter: drop-shadow(-5px -5px 10px black); }
这一行里加不进去？
夕阳黄昏 发表于 2024-11-16 13:01
#msvg { position: absolute; cursor: pointer; transform-origin: 0 100%; filter: drop-shadow(-5px - ...
是的，代码也翻译过。 梦江南 发表于 2024-11-16 08:08
早上好，谢谢梦油老师沙发支持。
彼此、彼此。 梦油 发表于 2024-11-16 14:50
彼此、彼此。
梦油老师傍晚好! 梦江南 发表于 2024-11-16 17:03
梦油老师傍晚好!
有来无往非礼也。
页:
[1]
2