青衫隐（学习黑师《崛起》星月笋效果）
位置:
首页 >
悄然作业[ 发布时间: 2023.5.9 作者: 花飞飞 阅读: 177 ]
:doodle {@grid: 10 / 1024px 640px;background: lightblue url('https://s1.ax1x.com/2023/05/09/p9B87F0.jpg') no-repeat center/cover;box-shadow: 0 0 8px #000;position: relative;margin: 20px auto;z-index: 1;--state: paused;}position: absolute;@nth(1) {--deg: 10deg;@size: 80px;@place: 20% 26%;border-radius: 50%;box-shadow: 18px 18px snow;transform: rotate(-10deg);animation: rot .8s infinite alternate linear var(--state);:before {content: '';@size: 100%;position: absolute;left: 18px;top: 18px;cursor: pointer;}}@match(i > 1 && i ≤ 80) {@size:@r(1,4)px;@place: @r(20, 100)% @r(0, 30)%;background: lightblue;--deg: -45deg;animation: fade @r(.8, 1.2)s @r(-.2, 1)s infinite alternate, rot @r(.5, 1.5)s infinite alternate;}@match(i > 80) {@size: @r(10px, 110px) @lr;background: linear-gradient(DimGray,silver);left: @r(0, 100)%;bottom: 0;transform: translateY(@p(50%, 100%)) rotate(45deg) skew(@r(30, 40deg), @lr);}@at(1,3) {@size: 140px;@place: 180px 420px;background: linear-gradient(silver, DarkSlateGray);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 .8s infinite alternate linear var(--state);}@at(1,2) {@size: 60px;@place: 360px 400px;background: linear-gradient(silver, DarkSlateGray);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 .6s infinite alternate linear var(--state);}@keyframes fade { to { opacity: .2; } }@keyframes rot {to { transform: rotate(var(--deg)); }}@keyframes swing { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
前一篇: 春（学习黑师《非洲大象》图片碰触旋转效果）
下一篇: 落花缤纷（学习黑师《落花缤纷》花飞飞效果）
发表评论:
评论列表 [2条]
#2 | 马黑 于 2023-5-9 22:51 发布: 加了背景图，效果杠杠的
#1 | 飞飞 于 2023-5-9 20:43 发布: 音乐用了酷美的，有点长，不知能否秒放
