Css 旋转笑脸加载器

我想用纯CSS复制下面的gif动画，有可能吗？如何复制？我也愿意接受其他合适的方法

下面的代码片段是我到目前为止得到的，它只是一张静态的脸

正文{
背景：#fff；
利润率：50像素；
}
.加载器{
位置：相对位置；
边界半径：50%；
框大小：边框框；
宽度：80px；
高度：80px；
背景：线性梯度（至底部，#fff 50%，#51cf66 50%）；
}
加载器：以前{
内容：“；
位置：绝对位置；
左：10px；
右：10px；
顶部：10px；
底部：10px；
边界半径：50%；
背景：#fff；
}
多特先生{
位置：绝对位置；
宽度：10px；
高度：10px；
边界半径：50%；
背景：#51cf66；
}
.多特：第一个孩子{
左：10px；
顶部：10px；
}
多特：最后一个孩子{
右：10px；
顶部：10px；
}

---

hmmm对于这种动画，最好从CSS中调整SVG

用于绘制完整CSS笑脸的技术依赖于线条背景来调整线条的“长度”，而在旋转时尝试设置动画（增加长度）会耗费大量资源

我能用纯CSS和无SVG来调整你的代码的最接近点是，希望能有所帮助

正文{
背景：#fff；
利润率：50像素；
}
斯迈利先生{
位置：相对位置；
宽度：70px；
高度：70像素；
}
.加载器{
位置：相对位置；
边界半径：50%；
框大小：边框框；
宽度：70px；
高度：70像素；
背景：线性梯度（至底部，#fff 50%，#51cf66 50%）；
动画：无限旋转；
}
加载器：以前{
内容：“；
位置：绝对位置；
左：8px；
右：8px；
顶部：8px；
底部：8px；
边界半径：50%；
背景：#fff；
}
.左点，.右点{
位置：绝对位置；
宽度：10px；
高度：10px；
边界半径：50%；
背景：#51cf66；
}
点左{
左：4px；
顶部：10px；
动画：消失2s无限；
}
点对{
右：6px；
顶部：10px；
动画：dissapearr2s无限；
}
@关键帧旋转{
从{
变换：旋转（0）；
}
到{
变换：旋转（720度）；
}
}
@关键帧消失{
0%{
变换：比例（1）；
}
10%{
变换：比例（1）；
}
15%{
变换：比例（0）；
}
45%{
变换：比例（0）；
}
50%{
变换：比例（1）；
}
}
@关键帧消失{
0%{
变换：比例（1）；
}
15%{
变换：比例（1）；
}
20%{
变换：比例（0）；
}
65%{
变换：比例（0）；
}
70%{
变换：比例（1）；
}
}

---

更新2020

一个新的优化版本，代码更少，我将使微笑的边缘更真实：

。微笑{
利润率：30像素；
宽度：100px；
高度：100px；
边界半径：50%；
背景：
径向梯度（圆最近侧，#42bd56 99%，透明）
-35px 42px/计算（100%-15px）15px重复-x，
线性梯度（#fff，#fff）顶部/100%50px无重复，
径向梯度（最远侧，透明钙（99%-15px），#42bd56钙（100%-15px））；
位置：相对位置；
}
.微笑：以前，
.微笑：之后{
内容：“；
位置：绝对位置；
宽度：100%；
顶部：钙（50%-7px）；
高度：15px；
背景：径向梯度（圆最近侧，#42bd56 99%，透明）-7.5px 0/200%100%；
变换：旋转（计算（var（-o，0度）-50度））；
}
.微笑：之后{
--o：-80度；
}
.微笑：悬停{
动画：线性旋转1.2秒；
}
.微笑：悬停：之前，
.微笑：悬停：之后{
动画：继承；
动画名称：rotateE；
}
@关键帧旋转{
50% {
变换：旋转（360度）；
背景尺寸：计算（90%-15px）15px，100%30px，自动；
背景位置：-25px 22px，顶部，0；
}
100% {
变换：旋转（720度）；
}
}
@旋转的关键帧{
30%,70% {
变换：旋转（计算（var（--o，0度）-180度）；
}
}

悬停以设置动画

尽管这种笑脸动画可以仅使用CSS实现，正如其他人所说，SVG显然是一个更好的选择，主要原因如下：

• 设置渐变动画不是最佳性能
• 如果不添加不带表情的标记，在微笑的每一侧进行旋转将非常困难
• SVG是一种用于绘制此类形状并为其设置动画的工具。它使它们更易于维护，代码更易于阅读和理解

也就是说，我举了一个你的例子。
这就是它看起来的样子：

下面是代码（从中简化）：

svg{
宽度：100px；
高度：自动；
显示：块；
变换：旋转（0度）；
保证金：0自动；
}
.微笑，.眼睛{
笔画：水鸭；
笔画宽度：1.3；
笔划线头：圆形；
填充：透明；
}
svg:hover{动画：旋转1.2s立方贝塞尔（0.65,0.000,0.75,1.000）；}
svg:hover.smile{动画：smile1s立方贝塞尔（0.2,0.000,0.8,1.000）；}
眼睛{动画：眼睛1s立方贝塞尔（.7,0.000,0.4,1.000）；}
@关键帧旋转{到{变换：旋转（720deg）；}
@关键帧{50%{stroke dasharray:20,5.1327；}
@关键帧眼睛{70%{笔划数组：1,0,5,23.6327；}
h1{文本对齐：居中；颜色：蓝绿色；}

让我停下来

我提供了CSS解决方案，我完全同意您的看法，SVG更适合于这些东西，HTML/CSS的目的不是绘制/动画这些东西，但这是一项比其他东西更具挑战性的任务：）通过使用CSS，我们必须更多地思考，我们可以找到一些技巧，让我们学习更多CSS，并且确信OP知道这一点，这就是为什么他在问题中只标记CSS。但当涉及到生产和现场环境时，我们必须选择最好的替代方案，在这种情况下，首先是GIF，然后是SVG；）@Temaniaf如果我在挑战部分完全同意你的观点，我也喜欢这些问题，但是这个问题需要SVG方法，因为它是“真实世界”的答案，可能对其他访问这里的人有用。在…上