三套车（大提琴+钢琴版）

马黑黑

马黑黑

帖子代码：

<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>
 
<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 = 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>

马黑黑

本帖配套 svgdr教程·画折线 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! 做演示


【附】svgdr教程目录 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!

梦江南

老师又出新作了，早上好！

梦油

黑黑先生早晨好！
冰雪遮盖着伏尔加河，冰河上跑着三套车…………这是我很喜欢的一支歌曲。这首俄罗斯民歌，当时（五十年代）在我们学校很流行，每当学校组织的晚会上，几乎都有这首歌曲出现。
你制作的这件作品，图美、曲好，我给一个大大的赞！
代码方面，我说不出一二三来。

红影

这个又是实例，看到有讲解。我先忍住看这个帖子的代码的想法，先去看讲解

红影

这个是课程里的小三角变成了小方块，并运用到实例中了。
背景和三套车歌曲及其相符，视频也用得好

红影

鼠标触碰，让填充和描边颜色互换了，这个思路有趣

红影

发现个特别之处
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');  都可以，使用别的名称时，就必须对应了吧？

红影

要写教程，还要做实例，黑黑辛苦了

花飞飞

曲子经典，画面如电影大片一般，有故事感。。小播色彩浪漫梦幻， 十分好看。。

马黑黑

花飞飞 发表于 2024-11-5 19:29
曲子经典，画面如电影大片一般，有故事感。。小播色彩浪漫梦幻， 十分好看。。

谢夸

马黑黑

醉美水芙蓉 发表于 2024-11-5 18:46
老师这个有点像摩天轮了！

花飞飞

#msvg:hover polyline { transition: 1s; fill: darkred; stroke: hotpink; }
触碰时小播颜色可以这么变化，整个交换反转，现在看来是理所当然很简单，设计的很是巧妙。。

马黑黑

梦油 发表于 2024-11-5 09:41
黑黑先生早晨好！
冰雪遮盖着伏尔加河，冰河上跑着三套车…………这是我很喜欢的一支歌曲。这首俄罗斯民歌 ...

当年咱们和前苏联是同志+兄弟的关系，文化交流、借鉴非常盛行，影响了至少两代人

马黑黑

红影 发表于 2024-11-5 17:17
要写教程，还要做实例，黑黑辛苦了

手掌辛苦

马黑黑

红影 发表于 2024-11-5 16:19
这个又是实例，看到有讲解。我先忍住看这个帖子的代码的想法，先去看讲解

花飞飞

折线组成的小播反而像矩形，而之前矩形的像梯形，主打一个出其不意，意料之外。。

马黑黑

花飞飞 发表于 2024-11-5 19:31
#msvg:hover polyline { transition: 1s; fill: darkred; stroke: hotpink; }
触碰时小播颜色可以这么变化 ...

CSS在某些层面能管svg里面的元素