《在时间的河上》（学习黑黑《百鸟归巢》代码效果）
<style>#mydiv { margin: 80px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/672c8272d29ded1a8cfd10c1.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; position: relative; --state: running; }
#msvg { position: absolute; left: 33%; top: 7.6%; cursor: pointer; animation: rot 10s linear infinite var(--state); }
#msvg:hover path { transition: 1s; stroke: DarkRed; }
#msvg:hover circle { transition: 1s; fill: DarkRed; }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(red 30%, transparent); pointer-events: none; mix-blend-mode: screen; }
#fsbtn { position: absolute; left: 50%; bottom: 15px; color: tomato; padding: 4px 6px; border: 2px solid tomato; 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=265928" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2414777/00/01/68/5b4865ba379a9_10s_big.mp4" autoplay loop muted></video>
<svg id="msvg" width="200" height="200"></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 all = 12;
Array(all).fill(0).forEach( (_,k) => dr.path('M70 50 Q100 0,130 50', 'none', 'tomato', 6, 'round').transform(`rotate(${360 / all * k} 100 100)`) );
var total = 12;
Array(total).fill(0).forEach( (_,k) => dr.path('M100 100 H42', 'none', 'indianred', 3, 'round').transform(`rotate(${360 / all * k} 100 100)`) );
dr.circle(100, 100, 6, 'coral');
msvg.onclick = () => {
msvg.style.setProperty('--state', ['paused','running'][+aud.paused]);
aud.paused ? (aud.play(), vid.play()) : (aud.pause(), vid.pause());
};
fscreen.fs('mydiv', 'fsbtn');
aud.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));
</script> 把白鸟归巢的二次赛贝尔曲线外移了一下，还加了《Dream Away》的直线，还有前面的一个圆心。
然后问题来了，鼠标触碰后其他的都变色了，那个圆心不变色@马黑黑 {:4_173:} 本帖最后由 马黑黑 于 2024-11-10 23:22 编辑
红影 发表于 2024-11-10 22:25
把白鸟归巢的二次赛贝尔曲线外移了一下，还加了《Dream Away》的直线，还有前面的一个圆心。
然后问题来了 ...
css控制鼠标移过svg时产生假交互效果，起作用的语句是：
#msvg:hover path { transition: 1s; stroke: DarkRed; }
这一句管 svg 子元素的 path 元素，它不管那个圆。可以加一行到它的下面：
#msvg:hover circle { transition: 1s; fill: DarkRed; }
这就连圆也一起变色了，圆用的是 fill 填充 马黑黑 发表于 2024-11-10 23:14
css控制鼠标移过svg时产生假交互效果，起作用的语句是：
#msvg:hover path { transition: 1s; stroke: ...
哦，对的，一个是边框一个是填充，我忘记这个了。谢谢黑黑{:4_187:} 改好了，果然这两者不是一回事呢。 https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif https://pic.imgdb.cn/item/67322a63d29ded1a8cb28665.jpg
评分前后画面对比
https://pic.imgdb.cn/item/67322a90d29ded1a8cb2b01b.jpg
欣赏影子精美音画，早上好！{:4_187:} 仔细看还有一个男子坐着。{:4_173:} 很优美的音乐。 好美的夜景啊！ 起个网名好难 发表于 2024-11-11 05:54
评分前后画面对比
是的我也发现好几个帖子都这样，不知道怎么改呢。 梦江南 发表于 2024-11-11 09:13
欣赏影子精美音画，早上好！
谢谢江南鼓励{:4_187:} 梦江南 发表于 2024-11-11 09:14
仔细看还有一个男子坐着。
是的，在看山下的城市灯光如河流，流走世间的一切。 梦江南 发表于 2024-11-11 09:16
很优美的音乐。
为了做贴去搜的，之前也没不熟悉这曲子{:4_173:} 梦油 发表于 2024-11-11 09:59
好美的夜景啊！
谢谢梦油，一起欣赏夜景。 醉美水芙蓉 发表于 2024-11-11 11:45
欣赏红影美图！
多谢水芙蓉美女鼓励{:4_187:} 醉美水芙蓉 发表于 2024-11-11 11:46
红影厉害！播放器改得漂亮！
我改着玩的，看看还不错就用了{:4_173:}