化身孤岛的蓝鲸（学习黑师优弧劣弧路径作业之四）
位置:
首页 >
悄然作业[ 发布时间: 2023.6.12 作者: 花飞飞 阅读: 250 ]
:doodle { @size: 300px; cursor: pointer; right: 227px; top: 42px; z-index: 4; }clip-path: @shape(frame: 4;points: 40;x: cos(12t)^1 * cos(15t);y: cos(12t)^1 * sin(15t););background: linear-gradient(green,MediumPurple,RoyalBlue);animation: rot 6s infinite linear var(--state);@keyframes rot { to { transform: rotate(360deg); }}:doodle { @size: 1024px 640px; background: url('https://s1.ax1x.com/2023/06/12/pCeaJQP.jpg') no-repeat center / cover; box-shadow: 0 0 6px #000; margin: 20px auto;}@size: 120px;position: absolute;background: linear-gradient(green,MediumPurple,RoyalBlue);clip-path: @shape(frame: 4;points: 40;x: cos(12t)^1 * cos(15t);y: cos(12t)^1 * sin(15t););border-radius: 50%;cursor: pointer;offset-path: path('M360 70 A120 120 0 1 0 360 560');offset-distance: calc((@i - 1) * 20%);animation: rot 6s infinite linear var(--state);@keyframes rot { to { transform: rotate(360deg); }} :doodle { @size: auto 4em; z-index:5; bottom: 10px;left:520PX; --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%; } }
前一篇: 工业风（学习黑师优弧劣弧路径作业之四第二版）
下一篇: 卜算子·咏梅（学习黑师椭圆文字旋转效果）
发表评论:
评论列表 [1条]
#1 | 马黑 于 2023-6-12 23:20 发布: 好漂亮
