工业风（学习黑师优弧劣弧路径作业之四第二版）

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

:doodle { @size: 400px; cursor: pointer; right: 430px; top: 110px; opacity: .96;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(DeepSkyBlue,RoyalBlue,Snow);animation: rot 6s infinite linear var(--state);@keyframes rot { to { transform: rotate(360deg); } }

:doodle { @size: 1024px 640px; margin: 20px auto; }@size: 120px;position: absolute;background: linear-gradient(Snow,RoyalBlue,DeepSkyBlue);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('M370 70 A120 120 0 1 0 370 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:530PX; --geci: " css-doodle player"; --motion: cover2; --tt: 1s; }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%; } }

前一篇: 工业风代码
下一篇: 化身孤岛的蓝鲸（学习黑师优弧劣弧路径作业之四）

发表评论:

评论列表 [2条]

#2 | 八爷于 2023-6-13 19:13 发布: 工业元素的确明显

#1 | 悄然于 2023-6-13 19:05 发布: 这几个转圈圈的可以合在一起做点文章，就做了第二版……曲子难找，就先放着