夏意未满（学习黑师《寻》路径效果）

位置: 首页 > 悄然作业[ 发布时间: 2023.5.21 作者: 花飞飞阅读: 359 ]

:doodle { @size: 1024px 640px; background: url('') no-repeat center/cover; box-shadow: 0 0 6px #000; position: relative; z-index: 1; } @size: 100px; clip-path: @shape(fill: evenodd;points: 400;x: cos(2t) * cos(5t) * sin(t);y: sin(2t) * sin(4t) * cos(5t); rotate: 90; ); position: absolute; background: rgb(@m3(@r(255))); offset-path: path('M212 180a300 120 0 1 0 600 0a300 120 0 1 0 -600 0z'); animation: move 40s infinite linear var(--state); cursor: pointer; @keyframes move { to { offset-distance: 100%; } }

:doodle {@size: 620px 240px;right: 160px;bottom: 30px;cursor: pointer;z-index: 3;}@size: 50px;@place: calc(@col * 40px - 20px) calc(@row * 40px - 20px);font: normal 30px / 40px sans-serif;color:Orange;text-shadow: 1px 1px 2px #000;opacity: 0;:before {content: @pn([《咏二十四气诗·小满四月中》‍‍‍‍【唐】元稹‍‍‍‍‍‍小满气全时，如何靡草衰。‍‍田家私黍稷，方伯问蚕丝。‍‍杏麦修镰釤，錋瓜竖棘篱。‍‍向来看苦菜，独秀也何為？‍‍‍]);}animation: show .3s calc((@i - 1) * .3s) linear forwards var(--state);@keyframes show { to { opacity: 1; } }

:doodle { @size: auto 4em; top: 10px; --geci: "css-doodle player"; --motion: cover2; --tt: 1s; } /* 单元格两个伪元素显示lrc歌词 */ display: grid; place-items: center start; :before, :after { content: var(--geci); color:LightGrey; /* 歌词底色 */ font: bold 2em sans-serif; text-shadow: 1px 1px 2px #000; white-space: pre; } :after { position: absolute; width: 0; color: DarkSeaGreen; /* 同步歌词颜色 */ overflow: hidden; animation: var(--motion) var(--tt) linear forwards var(--state); } @keyframes cover1 { from { width: 0; } to { width: 100%; } } @keyframes cover2 { from { width: 0; } to { width: 100%; } }

前一篇: 沁园春长沙（空格实例）
下一篇: 方圆之道（学习黑师《Harmonia》圆形播放效果）二改

发表评论:

评论列表 [4条]

#4 | 飞飞于 2023-5-22 15:31 发布: 果然顺眼多了。。没那么呆头呆脑的样子：））

#3 | 马黑于 2023-5-22 12:57 发布: 这个朝向不是路径问题。对于offset-path路径，元素的朝向应该是水平朝向，头朝左或朝右，是这么个意思。

#2 | 悄然于 2023-5-22 12:38 发布: 好的，电脑时试试。关于路径我一无所知。得翻之前的相关教程吧

#1 | 马黑于 2023-5-22 11:09 发布: 蝴蝶朝向不对。可以在 clip-path: @shape()里面加一句，rotate: 90; 或 rotate: -90; 调整朝向。