快乐果农(学习黑师路径课程第一次作业)

位置: 首页 > 悄然作业
[发布: 2023.5.26  作者: 花飞飞  阅读: 284]
:doodle {@size: 1024px 640px;background: url('') no-repeat center/cover;box-shadow: 0 0 6px #000;position: relative;margin: 20px auto;z-index: 1;}@size: 60px;clip-path: @shape(points: 360;scale: .3;move: 0 .6;x: sin(5t) + sin(t) + tan.sin(3t);y: cos(2t) + cos(t) + tan.cos(6t);rotate: 90;);position: absolute;background: WhiteSmoke; offset-path: path('M0 60 Q300 200,400 180 T850 10');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:Teal; /* 同步歌词颜色 */ 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》圆形播放效果)二改
下一篇: 时间的力量(学习黑师时钟走动及路径练习作业之二)

发表评论:

  
 

评论列表 [1条]

#1 | 马黑 于 2023-5-26 22:51 发布: 路径用的不错

Copyright © 2014 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com