夏意未满(学习黑师《寻》路径效果)
位置:
首页 >
悄然作业[发布: 2023.5.21 作者: 花飞飞 阅读: 362]
: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; 调整朝向。