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

位置: 首页 > 悄然作业
[发布: 2023.6.17 作者: 花飞飞阅读: 268]

:doodle { @size: 248px; cursor: pointer; right: 520px; top: 240px; opacity: .96;z-index: 4; }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;}@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;}@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%); }}

前一篇: 化身孤岛的蓝鲸（学习黑师优弧劣弧路径作业之四）
下一篇: 父亲节快乐（学习黑师《惠风和畅》飞行效果）

发表评论:

评论列表 [5条]

#5 | 飞飞于 2023-6-17 16:26 发布: 反转的不晕，更好看。耶~~哈哈。。。。

#4 | 马黑于 2023-6-17 16:05 发布: 如果需要反转，你把需要改变旋转方向的关键帧动画 keyframes 的 from 和 to 的值对换一下即可。注意，from 必须在 to 的前面。

#3 | 悄然于 2023-6-17 14:22 发布: 老师给瞧瞧，中间需要反转吗？倒着走会不会晕

#2 | 马黑于 2023-6-17 12:53 发布: 创意独特，实现方法娴熟，技术含量慢慢的。赞个

#1 | 飞飞于 2023-6-17 10:22 发布: 这歌真吵啊。。。