前言
不知各位JYM平时有没有做饭的习惯，像我，一到周末就会给自己一个大展厨艺的机会，因此今天要实现的效果也将会是和厨艺有关。没错，这次给大家带来的是一个生动的平底锅翻炒鸡蛋。该效果可以分为两部分，一是平底锅，二是鸡蛋，如果还要细分的话可以再加上翻炒这样一个动作动画
效果预览
以上就是整个效果的预览状态，接下来将带大家来逐一实现它们。
HTML
首先我们看到HTML部分，相关代码如下。这里总共包括了五到六个部分。
<div class="pan-loader">
<div class="loader"></div>
<div class="pan-container">
<div class="pan"></div>
<div class="handle"></div>
</div>
<div class="shadow"></div>
</div>
.pan-loader 是最外层容器的样式，设置了宽度、高度、背景颜色等属性，使其成为一个矩形容器。.loader 是旋转圆圈的样式，设置了宽度、高度、边框、边框圆角、动画等属性，使其成为一个旋转的圆圈。.pan-container 是容器的样式，设置了宽度、高度、背景颜色等属性，使其成为一个矩形容器。.pan 是平底锅的样式，设置了宽度、高度、边框、边框圆角等属性，使其成为一个平底锅的形状。.handle 是手柄的样式，设置了宽度、高度、背景颜色等属性，使其成为一个手柄。.shadow 是阴影的样式，设置了宽度、高度、背景颜色等属性，使其成为一个阴影效果。
综上所述，通过旋转的荷包蛋、平底锅和手柄的组合，以及阴影效果，形成了一个平底锅炒蛋动画。
CSS
接下来便是CSS部分了，前面我们也提到过这里应用到了很多旋转动画，这些都是在CSS中实现的。
下面是loader类的动画实现，loader类其实代表的就是荷包蛋，因为看起来像加载过程，因此命名为loader，相关代码如下。
.loader {
position: relative;
top: 10%;
left: 0;
width: 45%;
height: 45%;
border: 10px solid transparent;
border-bottom: 10px solid #fdd835;
border-radius: 50%;
animation: loader 2s linear infinite;
z-index: -1;
}
@keyframes loader {
0% {
width: 10%;
transform: rotate(0deg);
}
10% {
left: 0%;
transform: rotate(0);
}
20% {
width: 0;
left: 20%;
}
30% {
width: 25%;
}
50% {
left: 10%;
width: 35%;
}
70% {
width: 30%;
left: 18%;
transform: rotate(240deg);
}
90% {
width: 30%;
left: 10%;
}
100% {
width: 2%;
left: 25%;
transform: rotate(360deg);
}
}
在荷包蛋中定义了名为loader的动画。该动画是一个线性的、无限循环的动画，持续时间为2秒。动画的关键帧定义了加载器在不同时间点的样式。在 0% 关键帧指定了加载器的宽度为10%、旋转角度为0度；在 10% 关键帧指定了加载器的左侧位置为0%、旋转角度为0度；以此类推，直到 100% 关键帧指定了加载器的宽度为2%、左侧位置为25%、旋转角度为360度。
下面是pan类的动画实现，相关代码如下。
@keyframes pan {
0% {
transform: rotate(0deg);
transform-origin: top right;
}
10% {
transform: rotate(-2deg);
transform-origin: top right;
}
50% {
transform: rotate(15deg);
}
100% {
transform: rotate(0deg);
}
}
这里定义了一个名为pan的动画。动画中定义了四个关键帧 （0%，10%，50%，100%），每个关键帧对应不同的动画状态。
在第一个关键帧 0%，元素的初始位置为绕右上角顺时针旋转0度，即不进行旋转。同时，transform-origin属性被设置为top right，表示旋转的中心点位于元素的右上角。
在第二个关键帧 10%，元素开始逐渐向逆时针方向旋转，旋转角度为 -2度。transform-origin属性的值保持不变。
在第三个关键帧 50%，元素已经旋转到了15度的角度。transform-origin属性的值保持不变。
在最后一个关键帧 100%，元素恢复到初始状态，即旋转角度为0度。
接下来是shadow类中的动画实现，相关代码如下。
.shadow {
position: relative;
background: lightgray;
width: 30%;
height: 8px;
top: 15%;
left: 15%;
border-radius: 20px;
animation: shadow 2s infinite;
}
@keyframes shadow {
0% {
width: 30%;
}
50% {
width: 40%;
left: 20px;
}
100% {
width: 30%;
}
}
在 @keyframes shadow 中。它定义了元素的宽度和左侧位置在不同关键帧（百分比）的变化。具体来说，在 0% 关键帧，元素的宽度为30%；在 50% 关键帧，元素的宽度变为40%，左侧位置变为20像素；在 100% 关键帧，元素的宽度恢复为30%。由于动画属性设置为infinite，所以动画将无限循环播放。
这里主要介绍的是相关动画的实现，关于其他样式大家可以去码上掘金查看完整代码。
总结
以上就是整个翻炒鸡蛋效果的实现过程了，代码比较简单，不涉及复杂的JS逻辑，只有纯CSS部分。通过CSS动画来控制翻炒的动作，让平底锅和鸡蛋结合在一起不显得生硬，另外，如果有其他想法的话大家也可以在此效果上进行二次创作，也欢迎各位在评论区分享自己的想法。最后，该效果的完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~
