本期我们通过vite+scss去完成一个橘猫心情变化的创意动画，这里的逻辑我们将不使用任何js代码，仅依靠css来完成，所以，通过本期的动画，你可以到一些css动画和绘制的一些技巧。废话不多说，先康康效果~
VID__.gif还比较可爱吧。当鼠标（鱼）移入出，橘子闷闷不乐，无精打采的。但当鼠标（鱼）移入，橘子一看见最喜欢的鱼立马就开心了，连天气都变好了，对，这只橘子就是这么馋，变成胖橘是有原因的。
好了，我们马上就要进入正文了，我们会从基础搭建，太阳，云，猫的绘制和动画去了解制作这个动画的流程。
正文1.搭建与结构yarnaddvitesasssass-loader复制代码
我们是用vite和sass去完成项目的构建，和样式的书写，所以我们先安装下他们。
divid="app"divclass="warrper"divclass="sun"/divdivclass="cloud"/divdivclass="cat"divclass="eyeleft"divclass="eye-hide"/div/divdivclass="eyeright"divclass="eye-hide"/div/divdivclass="nose"/divdivclass="mouth"/div/div/div/div复制代码
在html我们先写出结构来。div#app作为主界面去填满一屏，而div.warrper就作为主要内容的展示区域也就是那个圆圈。然后，在圆圈里面我们放太阳div.sun，云朵div.cloud，猫div.cat，当然猫里面还有眼睛鼻子嘴巴这些，至于猫的耳朵就用两个伪类做个三角形去实现。
2.变量与界面cat:rgb(,,);:root{--bgColor:rgb(81,,);--eyeHideTop:0px;--cloudLeft:45%;--mouthRadius:10px10px00;}#app{width:%;height:vh;position:relative;display:flex;justify-content:center;align-items:center;background-image:repeating-linear-gradient(0deg,hsla(,87%,75%,0.2)0px,hsla(,87%,75%,0.2)30px,transparent30px,transparent60px),repeating-linear-gradient(90deg,hsla(,87%,75%,0.2)0px,hsla(,87%,75%,0.2)30px,transparent30px,transparent60px),linear-gradient(90deg,rgb(,,),rgb(,,));}.warrper{width:px;height:px;border-radius:50%;border:10pxsolidwhite;position:relative;overflow:hidden;background-color:var(--bgColor);transition:background-color1slinear;cursor:url("./assets/fish.png"),default;:hover{--bgColor:rgb(,,);--eyeHideTop:-20px;--cloudLeft:%;--mouthRadius:px10px;}}复制代码
我们先定义猫的主色调，还有一些要变化的颜色和距离，因为我们移入将通过css3去改变这些属性，来达到某些动画的实现。
我们期望的是，当鼠标移入圆圈后，天空变晴，云朵退散，猫开心充满精神，所以，bgColor：天空颜色，eyeHideTop猫的眼皮y轴距离，cloudLeft云朵x轴偏移距离，mouthRadius猫嘴巴的圆角值。目前来说，当鼠标移入div.warrper后，这些值都会发生变化。另外，我自定义了鼠标图标移入圆圈变成了一条鱼（即cursor:url(图片地址)）。这里的hover后的值是我事先算好的，如果大家重新开发别的动画可以一边做一边算。