卜算子·咏梅（学习黑师椭圆文字旋转效果）

南无月

:doodle { @size: 248px; cursor: pointer; right: 520px; top: 240px; opacity: .96;z-index: 9; }clip-path: @shape(points: 200;scale: .10;k: 3;x: (k+1)*cos(t) - cos((k+3)*t);y: (k+1)*sin(t) - sin((k+3)*t););background: url('https://pic.imgdb.cn/item/648d13911ddac507ccceebcc.png')no-repeat center / cover;;animation: rot 4s infinite linear var(--state);@keyframes rot { to { transform: rotate(360deg); } }:doodle {@size: 1020px 620px;border: rebeccapurple;z-index: 8;}@size: 10px;@place: 20px 160px;font: bold 36px sans-serif;font-shadow: 1px 1px 2px #000;color: #purple;:after { content: '@pn([风雨送春归，飞雪迎春到。已是悬崖百丈冰，犹有花枝俏。俏也不争春，只把春来报。待到山花烂漫时，她在丛中笑。])'; }offset-path: path('M60 200 a100 60 0 1 0 640 0 a100 60 0 1 0 -640 0z'); mPath ¡ new Path(); offset-rotate: 0deg;animation: move 16s infinite linear var(--state);@keyframes move {from { offset-distance: calc(100% / @size * (@i - 1) + 100%); }to { offset-distance: calc(100% / @size * (@i - 1)); }}:doodle {@size: 1020px 620px;border: rebeccapurple;z-index: 7;}@size: 10px;@place: 10px 160px;font: bold 63px sans-serif;font-shadow: 1px 1px 2px #000;color: #purple;:after { content: '@pn([卜算子咏梅作者毛泽东 ])'; }offset-path: path('M160 160 a160 100 0 1 0 400 0 a150 100 0 1 0 -400 0z'); offset-rotate: 0deg;animation: move 8s infinite linear var(--state);@keyframes move {from { offset-distance: calc(100% / @size * (@i - 1)); }to { offset-distance: calc(100% / @size * (@i - 1) + 100%); }}

南无月

@马黑黑 老师来瞧瞧，中间反转的也挺好。。。

马黑黑

若想评分后帖子正常运行，需要给JS加入：

<script>
(function() {
    //原来的代码
})();
</script>

这是将原来的JS代码作为一个单位组织起来，与外界隔离，故而评分后的页面局部刷新动作需要考虑这个被隔离开来的“组织”，重新完整运行。

马黑黑

调整了旋转方向，显得更为协调、有机，美感足且丰厚。

可以看出，做帖时对一些细节的“纠结”，确实是完善设计必不可少的环节。

南无月

马黑黑 发表于 2023-6-17 17:20
若想评分后帖子正常运行，需要给JS加入：

加好了，瞧瞧？

马黑黑

南无月 发表于 2023-6-17 17:29
加好了，瞧瞧？

我平过分了

花飞飞

马黑黑 发表于 2023-6-17 17:22
调整了旋转方向，显得更为协调、有机，美感足且丰厚。

可以看出，做帖时对一些细节的“纠结”，确实是完 ...

我从开始就关心的只是晕不晕，效果出来才算放心。。
原来还有这么多好处，大师果然厉害。。

南无月

马黑黑 发表于 2023-6-17 17:29
我平过分了

刚反应过来，试了一下，可以了

南无月

马黑黑 发表于 2023-6-17 17:22
调整了旋转方向，显得更为协调、有机，美感足且丰厚。

可以看出，做帖时对一些细节的“纠结”，确实是完 ...

原来纠结也挺好的。

马黑黑

南无月 发表于 2023-6-17 17:43
原来纠结也挺好的。

那是自然

马黑黑

南无月 发表于 2023-6-17 17:43
刚反应过来，试了一下，可以了

当然。我这个发现也是在多方研究的基础上得出的。

马黑黑

花飞飞 发表于 2023-6-17 17:34
我从开始就关心的只是晕不晕，效果出来才算放心。。
原来还有这么多好处，大师果然厉害。。

我的美学课是音乐老师教的

红影

这个漂亮，做了两个椭圆旋转，月儿太棒了

樵歌

不管，我要抄作业谁让你做介么优秀的。

小文

喜欢

千羽

还是两层逆反旋转，月儿好厉害啊

千羽

月儿总是学习中有创新，每次效果都是美轮美奂的

南无月

马黑黑 发表于 2023-6-17 18:10
那是自然

大道自然。。。纠结乃大道也。。

南无月

马黑黑 发表于 2023-6-17 18:10
当然。我这个发现也是在多方研究的基础上得出的。

我大概是删歌词的时候给删除了。。JS代码我能不动 就不动的。。