晚霞中的舞者（学习黑师《大自然之音》代码手绘图案播放效果）
位置:
首页 >
悄然作业[ 发布时间: 2023.4.28 作者: 花飞飞 阅读: 249 ]
:doodle {@size: 1024px 640px;background: url('https://s1.ax1x.com/2023/04/28/p91CovD.md.jpg') no-repeat center/cover;pointer-events: none;margin: 20px auto;box-shadow: 0 0 8px #000;--state: paused;}@size: 600px;@place: left 10px;cursor: pointer;pointer-events: auto;@at(1,1) {background: gray linear-gradient(red, Olive,red);clip-path: @shape(points: 300;frame: 60;scale: .65;r: abs.cos(9t) ^ cos(9t););animation: rot 6s infinite linear var(--state);}@at(1,2) {@size: 100px;@place: 520px 500px;background: linear-gradient(silver,Orange);clip-path: @shape(points: 720;scale: .4 .3;-y: cos(5t) + cos(3t) + cos(5t);x: sin(3t) + sin(3/t) + sin(2t););transform-origin: bottom;animation: swing .5s infinite alternate linear var(--state);}@at(1,3) {@size: 100px;@place: 320px 580px;background: linear-gradient(silver,Orange);clip-path: @shape(points: 720;scale: .4 .3;-y: cos(5t) + cos(3t) + cos(5t);x: sin(3t) + sin(3/t) + sin(2t););transform-origin: bottom;animation: swing .5s infinite alternate linear var(--state);}@keyframes rot { to { transform: rotate(1turn); } }@keyframes swing { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
前一篇: 纯css-doodle布局举例贴第一次更改（加音乐）
下一篇: 【马黑黑五一节快乐】晨曦（学习黑师天女散珠加春分小播效果）
发表评论:
评论列表 [3条]
#3 | 悄然 于 2023-4-29 07:28 发布: 你演示了数学之美，代码真的有无限可能。服黑黑，五体投地……
#2 | 马黑 于 2023-4-28 23:37 发布: 图案是用路径+@shape函数做的，用到高等数学（极坐标系、卡迪尔坐标系与方程等），比较抽象。你能控制基于css-doodle的操作就可以了。
#1 | 悄然 于 2023-4-28 22:00 发布: 只改了个背景跟着玩一下，这个图案没法改
