星辰大海(学习黑师路径作业之五)
位置:
首页 >
悄然作业[发布: 2023.6.24 作者: 花飞飞 阅读: 233]
: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)。