乘风破浪（学习黑师小船图案和嵌套效果）
位置:
首页 >
悄然作业[ 发布时间: 2023.5.7 作者: 花飞飞 阅读: 178 ]
:doodle {@size: 1024px 640px;background: url('https://s1.ax1x.com/2023/05/07/p9dq3He.jpg') no-repeat center/cover;pointer-events: none;margin: 20px auto;box-shadow: 0 0 8px #000;--state: paused;}@size: 280px;@place: 660px 400px;cursor: pointer;pointer-events: auto;@at(1,1) {background: gray linear-gradient(DimGray,DarkSlateGray, DimGray);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: 140px;@place: 880px 320px;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 .4s infinite alternate linear var(--state);}@at(1,3) {@size: 60px;@place: 220px 320px;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);}@at(1,4) {@size: 100px;@place: 450px 560px;background: @doodle(:doodle {@grid: 2 / 100%;}@shape: fish;background: DarkSlateGray;@match(@row=@col) { animation: rot 6s infinite linear; }@keyframes rot { to { transform: rotate(360deg); } });@keyframes rot { to { transform: rotate(1turn); } }@keyframes swing { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
前一篇: 孤勇者（学习黑师《怒放的生命》光盘加底图小播效果）
下一篇: 春（学习黑师《非洲大象》图片碰触旋转效果）
发表评论:
评论列表 [1条]
#1 | 水怪 于 2023-5-8 09:03 发布: 好，对css-doodle单元格的控制已经比较有把握了
