:doodle { @size: 60px; cursor : pointer; left: 480px; bottom: 290px; z-index: 4; }clip-path: @shape(fill: evenodd;points: 300;scale: .45;x: cos(2t) + cos(7t);y: sin(2t) + sin(7t);); background: MediumPurple;animation: rot 6s infinite linear var(--state); @keyframes rot { to { transform: rotate(360deg); }} :doodle { @size: 1160px 600px; top:100px;} @size: 100px; @shape: circle;background: linear-gradient(to bottom,#9370DB 0%, #e9dfd1 100%);font: normal 30px / 30px sans-serif;:after { content: @pn([弦子醉清风月色正朦胧]); font-family: '楷体', '黑体', sans-serif; font-size: 6rem; color: #2F4F4F; text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff; font-weight: 900; letter-spacing: -2px; }animation: fall 1s calc((@i - 1) * 1s) linear forwards var(--state);@keyframes fall {from { transform: translateY(0); }to { transform: translateY(360px); }} :doodle {@grid: 16 / 1024px 640px;perspective: 800px;} :container {transform-style: preserve-3d;}@size: @r(3,6)px;border-radius: 50%;@place: center center;background: rgba( @m3(@r(255)),@r(.6, .9));transform: rotate(@r(720)deg) translate3d( @r(500)px, @r(300)px, @r(1000)px);animation: fly @r(20,40)s @r(-20,0)s infinite linear var(--state);@keyframes fly { to { transform: rotate(0) translate3d(0, 0, 0); } }