三套车（大提琴+钢琴版）
<style>#mydiv { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/4/stie.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; position: relative; --state: running; }
#msvg { position: absolute; left: calc(50% - 100px); top: 40px; cursor: pointer; animation: rot 10s linear infinite var(--state); }
#msvg:hover polyline { transition: 1s; fill: darkred; stroke: hotpink; }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
#fsbtn { position: absolute; left: 20px; bottom: 15px; color: white; background: steelblue; 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=2163349802" autoplay loop></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/06/27/15/38/31/video667d16f79d83a.mp4" autoplay loop muted></video>
<svg id="msvg" width="200" height="200" viewBox="-100 -100 200 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 tt = 15;
for(var i = 0; i < tt; i ++) {
dr.polyline('0 0,70 0,70 -10,85 -10,85 10,70 10,70 0', 'hotpink', 'darkred', 3).transform(`rotate(${360/tt*i}) translate(6)`);
}
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>
<h2>帖子代码：</h2>
<div id="hEdiv"><pre id="hEpre">
<style>
#mydiv { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/4/stie.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; position: relative; --state: running; }
#msvg { position: absolute; left: calc(50% - 100px); top: 40px; cursor: pointer; animation: rot 10s linear infinite var(--state); }
#msvg:hover polyline { transition: 1s; fill: darkred; stroke: hotpink; }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
#fsbtn { position: absolute; left: 20px; bottom: 15px; color: white; background: steelblue; 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=2163349802" autoplay loop></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/06/27/15/38/31/video667d16f79d83a.mp4" autoplay loop muted></video>
<svg id="msvg" width="200" height="200" viewBox="-100 -100 200 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 tt = 15;
for(var i = 0; i < tt; i ++) {
dr.polyline('0 0,70 0,70 -10,85 -10,85 10,70 10,70 0', 'hotpink', 'darkred', 3).transform(`rotate(${360/tt*i}) translate(6)`);
}
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>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script>
本帖配套 svgdr教程·画折线 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! 做演示
【附】svgdr教程目录 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!
老师又出新作了，早上好！{:4_199:} 本帖最后由 梦油 于 2024-11-5 09:45 编辑
黑黑先生早晨好！
冰雪遮盖着伏尔加河，冰河上跑着三套车…………这是我很喜欢的一支歌曲。这首俄罗斯民歌，当时（五十年代）在我们学校很流行，每当学校组织的晚会上，几乎都有这首歌曲出现。
你制作的这件作品，图美、曲好，我给一个大大的赞！
代码方面，我说不出一二三来。
{:4_199:}
这个又是实例，看到有讲解。我先忍住看这个帖子的代码的想法，先去看讲解{:4_173:} 这个是课程里的小三角变成了小方块，并运用到实例中了。
背景和三套车歌曲及其相符，视频也用得好{:4_199:} 鼠标触碰，让填充和描边颜色互换了，这个思路有趣{:4_199:} 发现个特别之处
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr('msvg');
当使用import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js';的时候
var dr = draw.dr('msvg'); 和 var dr = _dr('msvg');都可以，使用别的名称时，就必须对应了吧？ 要写教程，还要做实例，黑黑辛苦了{:4_190:} 曲子经典，画面如电影大片一般，有故事感。。小播色彩浪漫梦幻， 十分好看。。{:4_173:} 花飞飞 发表于 2024-11-5 19:29
曲子经典，画面如电影大片一般，有故事感。。小播色彩浪漫梦幻， 十分好看。。
谢夸 醉美水芙蓉 发表于 2024-11-5 18:46
老师这个有点像摩天轮了！
{:4_172:} #msvg:hover polyline { transition: 1s; fill: darkred; stroke: hotpink; }
触碰时小播颜色可以这么变化，整个交换反转，现在看来是理所当然很简单，设计的很是巧妙。。 梦油 发表于 2024-11-5 09:41
黑黑先生早晨好！
冰雪遮盖着伏尔加河，冰河上跑着三套车…………这是我很喜欢的一支歌曲。这首俄罗斯民歌 ...
当年咱们和前苏联是同志+兄弟的关系，文化交流、借鉴非常盛行，影响了至少两代人 红影 发表于 2024-11-5 17:17
要写教程，还要做实例，黑黑辛苦了
手掌辛苦 红影 发表于 2024-11-5 16:19
这个又是实例，看到有讲解。我先忍住看这个帖子的代码的想法，先去看讲解
{:4_173:} 折线组成的小播反而像矩形，而之前矩形的像梯形，主打一个出其不意，意料之外。。{:4_173:} 花飞飞 发表于 2024-11-5 19:31
#msvg:hover polyline { transition: 1s; fill: darkred; stroke: hotpink; }
触碰时小播颜色可以这么变化 ...
CSS在某些层面能管svg里面的元素