星辰大海（学习黑师路径作业之五）

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

:doodle { @size: 1024px 768px; background: url('') no-repeat center/cover; box-shadow: 0 0 6px #000; position: relative; z-index: 1;}@size: 90px;clip-path: @shape(points: 5;turn: 2;rotate: 90; );position: absolute;background:linear-gradient(DeepSkyBlue,RoyalBlue,MediumPurple);offset-path: path('m753.212726,220.910957c81.016003,-200.821131 398.439358,0 0,258.198597c-398.439358,-258.198597 -81.016003,-459.019728 0,-258.198597z');animation: move 20s infinite linear var(--state);cursor: pointer;@keyframes move { to { offset-distance: 100%; }}

:doodle { @size: auto 4em; z-index: 5; bottom: 10px; --geci: " css-doodle player" --motion: cover2; --tt: 1s;}/* 单元格两个伪元素显示lrc歌词 */display: grid;place-items: center start;:before,:after { content: var(--geci); color: Honeydew; /* 歌词底色 */ font: bold 2em sans-serif; text-shadow: 1px 1px 2px #000; white-space: pre;}:after { position: absolute; width: 0; color: RoyalBlue; /* 同步歌词颜色 */ 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%; }}

前一篇: 心中有海（学习黑师桃形剪切效果）
下一篇: 帽子边缘的蝴蝶（学习黑师路径作业之自由乱飞）

发表评论:

评论列表 [3条]

#3 | 飞飞于 2023-6-24 22:46 发布: 布局路径是工业风那种，沿路径放好多播放器的，明白了

#2 | 飞飞于 2023-6-24 21:45 发布: 好的。。运动路径可以理解，布局路径啥意思呀。。。比如呢？突然想到可以不用它给的图形，而是自己做好图后，按图上的要求做一个全新的不规则路径。。正在尝试中~~

#1 | 马黑于 2023-6-24 21:33 发布: offset-path可以做运动路径，也可以做布局路径。这个心形路径，属于 svg 格式，不要单位但有单位（px）。