来源网站代码：24小时超市1.配色背景色（夜色）：$BG_COLOR:#0b2e4e;底部颜色（地球）：$EARTH_COLOR:#000;超市背景色：$MARKET_WALL_COLOR:#333；月亮颜色：$MOONLIGHT_COLOR：#fefec9；文字颜色：$TIPS_COLOR:#bdf8ff;2.静态对象2.1。月亮moonhalo.market_top--moon{...box-shadow:0050px1px$MOONLIGHT_COLOR;}2.2。超市supermarket.container_bottom--market{...box-shadow:00100px1px$MOONLIGHT_COLOR;背景颜色：$MOONLIGHT_COLOR;}supermarketdoor.market_bottom--doors{.doors{.door_item{...背景颜色：$MOONLIGHT_COLOR;box-shadow:inset10px1px$MOONLIGHT_COLOR;&::before{...box-shadow:0px0px10px1px$MOONLIGHT_COLOR;}}}}2.3。猫猫头（头+两只耳朵）.cat--head{position:absolute;顶部：-8px；右：-10px；宽度：25px；高度：25px；边界半径：50%；背景色：$EARTH_COLOR；&::之前{内容：“”；;顶部：0；左：2px；宽度：10px；高度：10px；半径：2px；背景色：继承；变换：旋转（16度）；}&::after{内容：“”；位置：绝对；顶部：0；右：2px；宽度：10px；高度：10px；边界半径：2px；背景色：继承；变换：旋转（-16deg）；}}猫咪身体.cat--body{width:46px;高度：30px；边界半径：30px；background-color:$EARTH_COLOR;}猫咪尾巴.cat--tail{position:absolute;顶部：-24px；左：-20px；宽度：30px；高度：46px；边界半径：50%；border:7pxsolidrgba(255,255,255,0);边框顶部颜色：#000000；border-right-color:#000000;}猫猫四条腿.cat--legs{.leg{position:absolute;底部：-13px；宽度：6px；高度：20px；背景色：$EARTH_COLOR；变换原点：顶部中心；边界半径：3px；&:nth-child(1){左：5px；变换：旋转（20度）；}&:nth-child(2){左：5px；变换：旋转（-20deg）；}&:第n个孩子（3）{右：5px；变换：旋转（-20deg）；}&:nth-child(4){右：5px；变换：旋转（20度）；}}}三、关键动画3.1。月光移动.market_top--moon{...animation:moonMove360s无限交替线性;}@keyframesmoonMove{0%{transform:translate3d(0,0,0);}50%{转换：translate3d(500px,0,0);}100%{转换：translate3d(0,0,0);}}3.2。广告牌.tips{...animation:signboardFlashes5sinfinitealternatelinear;}@keyframessignboardFlashes{0%{opacity:1;}35%{不透明度：1；}36%{不透明度：0；}37%{不透明度：1；}70%{不透明度：1；}72%{不透明度：0；}73%{不透明度：1；}74%{不透明度：0；}75%{不透明度：1；}100%{不透明度：1;}}3.3。超市门.market_bottom--doors{.doors{.door_item{&:nth-child(2){动画：doorMovesLeft20s无限线性；}&:nth-child(3){动画n:doorMovesRight20s无限线性；}}}}@keyframesdoorMovesLeft{0%{transform:translateX(0);}28%{转换：translateX(0);}30%{转换：translateX(-90%);}54%{转换：translateX(-90%);}56%{转换：translateX(0);}83%{转换：translateX(0);}85%{转换：translateX(-90%);}97%{转换：translateX(-90%);}99%{转换：translateX(0);}100%{转换：translateX(0);}}@keyframesdoorMovesRight{0%{变换：translateX(0);}28%{转换：translateX(0);}30%{转换：translateX(90%);}54%{转换：translateX(90%);}56%{转换：translateX(0);}83%{转换：translateX(0);}85%{转换：translateX(90%);}97%{转换：translateX(90%);}99%{转换：translateX(0);}100%{转换：translateX(0);}}3.4.猫咪头部.cat--head{动画：catMovesHead0.3s无限交替线性；}@keyframescatMovesHead{0%{transform:translateY(0);}50%{转换：translateY(2px);}100%{转换：translateY(0);}}3.5。猫咪尾巴.cat--tail{animation:catMovesTail0.3s无限交替线性;}@keyframescatMovesTail{0%{transform:rotate(0);}50%{变换：旋转（-3deg）；}100%{变换：旋转（0）；}}3.6。猫咪四肢.legs{&:nth-child(1){animation:catMovesLegs0.6s无限线性;}&:nth-child(2){动画：catMovesLegs0.6s无限-0.3s线性；}&:nth-child(3){动画：catMovesLegs0.6s无限-0.3s线性；}&:nth-child(4){动画：catMovesLegs0.6s无限线性；}}@keyframescatMovesLegs{0%{变换：旋转（36度）；}50%{变换：旋转（-36deg）；}100%{变换：旋转（36度）；}}3.7。猫咪移动.cat{animation:catRuns20sinfinitelinear;}@keyframescatRuns{0%{transform:translatex(0)旋转Y(0)；}70%{转换：translateX(800px)rotateY(0);}71%{转换：translateX(1000px)rotateY(180deg);}100%{转换：translateX(0)rotateY(180deg);}}四、小结4.1。CSS相关APIbox-shadow:[水平偏移][垂直偏移][模糊半径][可选扩散半径][颜色];动画
