7 Years
<style>@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: #ccc url('https://638183.freep.cn/638183/t24/w6/7years.webp') no-repeat center/cover; }
#progress { position: absolute; width: 12vw; height: 12vw; right: 30px; top: 30px; transition: .4s; }
#prog, #track { fill: none; stroke: yellow; stroke-width: 16; stroke-opacity: .5; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
#prog { stroke-opacity: .8; }
#g1 { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: transparent; stroke: yellow; stroke-width: 2; animation: rotate 8s linear infinite var(--state); }
#btnFs { left: 20px; top: 20px; color: gold; border-color: currentColor!important; }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=412175643" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/1863507/00/31/09/5fab86307e62b.mp4" autoplay loop muted></video>
<svg id="progress" class="grayscale" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
<g id="g1" class="brightness"><title>ALT+X</title></g>
<g id="g2"><title>调节进度</title></g>
</svg>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.mod.js?v=1.0';
var dr = Dr.dr(progress);
dr.polygon('-15 0,-30 -150,30 -140, 15 0').addTo('g1').rotates(7);
dr.polyline('0 -190,190 -190,160 160').id('track').addTo('g2');
dr.polyline('0 -190,190 -190,160 160').id('prog').addTo('g2');
FS(pa, g1);
</script> <div class="codebox" data-prev="1">
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: #ccc url('https://638183.freep.cn/638183/t24/w6/7years.webp') no-repeat center/cover; }
#progress { position: absolute; width: 12vw; height: 12vw; right: 30px; top: 30px; transition: .4s; }
#prog, #track { fill: none; stroke: yellow; stroke-width: 16; stroke-opacity: .5; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
#prog { stroke-opacity: .8; }
#g1 { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: transparent; stroke: yellow; stroke-width: 2; animation: rotate 8s linear infinite var(--state); }
#btnFs { left: 20px; top: 20px; color: gold; border-color: currentColor!important; }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=412175643" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/1863507/00/31/09/5fab86307e62b.mp4" autoplay loop muted></video>
<svg id="progress" class="grayscale" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
<g id="g1" class="brightness"><title>ALT+X</title></g>
<g id="g2"><title>调节进度</title></g>
</svg>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.mod.js?v=1.0';
var dr = Dr.dr(progress);
dr.polygon('-15 0,-30 -150,30 -140, 15 0').addTo('g1').rotates(7);
dr.polyline('0 -190,190 -190,160 160').id('track').addTo('g2');
dr.polyline('0 -190,190 -190,160 160').id('prog').addTo('g2');
FS(pa, g1);
</script>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 黑黑老师早上好！很漂亮的小播，整体的色彩一致。很赞！{:4_187:} 这个g1的克隆只有rotates(7)，后面的角度和旋转中心都省略了呢。
看到了viewBox="-200 -200 400 400">，如此中心在0 0，也就是按 360 度平均旋转且旋转点在0 0的就可以省略了吧{:4_187:} 进来就看到这个7是画出来的，画得还挺好的呢。
这个标题怎么叫7年，还配了一对人儿的背景，是指的七年之痒么{:4_173:} 红影 发表于 2025-9-18 08:44
进来就看到这个7是画出来的，画得还挺好的呢。
这个标题怎么叫7年，还配了一对人儿的背景，是指的七年之痒 ...
《七年之痒》是1955年出品的一部电影，梦露主演，探讨婚姻中的诱惑与心里挣扎。歌曲7 years与此无关，这是2015年热门单曲，讲述的是成长经历与对未来的美好憧憬。本帖是翻唱性质的吉他版，非原曲。 红影 发表于 2025-9-18 08:42
这个g1的克隆只有rotates(7)，后面的角度和旋转中心都省略了呢。
看到了viewBox="-200 -200 400 400">，如 ...
严格来讲，不是 g1 的克隆。说明里应该讲到克隆对象，克隆的是刚刚绘制的元素，本帖是 polygon，这个多边形绘制好之后添加到 g1 分组作为它的子元素，然后克隆旋转这些多边形，它们同样是 g1 分组的子元素。元素之间的关系必须清晰。
之所以创建 g1 分组，是将 g1 作为容器，里面装载N多个图案、共同组合成小播形状。多个多边形放在 g1 里，然后 g1 就是小播，是它运行CSS关键帧动画而非N多个多边形。 梦江南 发表于 2025-9-18 08:05
黑黑老师早上好！很漂亮的小播，整体的色彩一致。很赞！
{:4_190:} 黑黑的速度太快了，前面的还没有消化，后面立马出来了，神速的{:4_174:} 小辣椒 发表于 2025-9-18 16:39
黑黑的速度太快了，前面的还没有消化，后面立马出来了，神速的
都是同一个模块 这个小播正中间又出现漂亮的图案。看单个绘制的分明是一个四边形，小梯形样纸的。。。
这么旋转7次居然可以交叠成如此美的形状。。。意想不到。。
今天的应该是没闭眼画的。。{:4_173:}
写了个7当进度条，理工男的设计果然与众不同。。。画面浪漫。。这个数字看着很实用。。 越看rotates指令很牛。。。今天这款小播阳光灿烂的
画面粒子扑面而来，背景中两个人七年依然甜如蜂蜜。。。{:4_170:}又蛰又甜的。 width: 12vw; height: 12vw; 这个尺寸从昨天开始就变成视口了，之前都是直接给尺寸的，效果差不多么。。
还是这样写有什么优势 花飞飞 发表于 2025-9-18 20:52
width: 12vw; height: 12vw; 这个尺寸从昨天开始就变成视口了，之前都是直接给尺寸的，效果差不多么。。
...
vw 是浏览器可视宽度，vh是高度。和百分比一样，是相对单位。但是，我们希望宽高一致时，用百分比得不到正方形的宽高尺寸，而 width height 都是用 vw 那么就按浏览器的可视宽度的一定比例，确保得到的是正方形尺寸。 花飞飞 发表于 2025-9-18 20:51
越看rotates指令很牛。。。今天这款小播阳光灿烂的
画面粒子扑面而来，背景中两个人七年依然甜如蜂蜜。。 ...
七年不是七年之痒，误读了 花飞飞 发表于 2025-9-18 20:47
这个小播正中间又出现漂亮的图案。看单个绘制的分明是一个四边形，小梯形样纸的。。。
这么旋转7次居然可 ...
{:4_203:} 马黑黑 发表于 2025-9-18 20:56
七年不是七年之痒，误读了
你看没读成痒的呀。我读的是甜腻甜腻的的。{:4_173:} 马黑黑 发表于 2025-9-18 12:21
《七年之痒》是1955年出品的一部电影，梦露主演，探讨婚姻中的诱惑与心里挣扎。歌曲7 years与此无关，这 ...
哦哦，原来一个是电影一个是音乐，知道了。 马黑黑 发表于 2025-9-18 20:57
先看画面好温馨，看到数字感觉，画面突然一变。。{:4_170:}
像是过节的时候拿了一把葱花当礼物。浪漫 又实用。 马黑黑 发表于 2025-9-18 12:27
严格来讲，不是 g1 的克隆。说明里应该讲到克隆对象，克隆的是刚刚绘制的元素，本帖是 polygon，这个多边 ...
被黑黑这样一说，这些元素关系就十分清晰了，真好{:4_187:}