如何仅使用CSS为给定SVG实现眨眼动画效果？

你的SVG里的眼睛是#Path_1159这个路径元素，我们可以通过CSS的transform结合关键帧动画模拟眨眼效果——本质是让眼睛在短时间内沿Y轴压缩至近乎闭合，再恢复原状。

实现步骤： #

• 给眼睛路径添加类名（比如.eye），方便CSS定位
• 定义CSS关键帧动画，控制眼睛的缩放变化
• 将动画绑定到眼睛元素上，设置合适的动画参数

修改后的完整代码： #

<div style="background: black;padding: 20px;">
  <style>
    .eye {
      transform-origin: center;
      animation: blink 3s infinite;
    }

    @keyframes blink {
      0%, 90%, 100% {
        transform: scaleY(1);
      }
      95% {
        transform: scaleY(0.1);
      }
    }
  </style>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="134.527" height="134.502" viewBox="0 0 134.527 134.502">
     <defs>
       <clipPath id="clip-path">
         <rect id="Rectangle_527" data-name="Rectangle 527" width="134.527" height="134.502" fill="none"/>
       </clipPath>
      </defs>
      <g id="Group_441" data-name="Group 441" clip-path="url(#clip-path)">
       <path id="Path_1157" data-name="Path 1157" d="M134.31,66.626A77.276,77.276,0,0,1,.3,66.817" fill="none" stroke="#fff" stroke-width="1"/>
       <circle id="Ellipse_25" data-name="Ellipse 25" cx="67.001" cy="67.001" r="67.001" transform="translate(0.25 0.25)" fill="none" stroke="#fff" stroke-width="1"/>
       <path id="Path_1158" data-name="Path 1158" d="M.336,66.626a77.275,77.275,0,0,1,133.889.1" fill="none" stroke="#fff" stroke-width="1"/>
       <path class="eye" id="Path_1159" data-name="Path 1159" d="M67.122,95.866a28.7,28.7,0,1,1,11.26-2.276,28.932,28.932,0,0,1-11.26,2.276m0-44.465h0c-1.232,4.832-2.378,8.063-4.592,10.276s-5.445,3.359-10.277,4.59c4.833,1.232,8.064,2.38,10.277,4.593s3.36,5.444,4.592,10.277c1.231-4.832,2.378-8.063,4.59-10.277s5.444-3.36,10.277-4.593c-4.833-1.231-8.064-2.378-10.277-4.59s-3.359-5.445-4.59-10.276" fill="#9bd698"/>
      </g>
    </svg>
    </div>

细节说明： #

• transform-origin: center确保眼睛从中心位置缩放，避免偏移
• 动画blink设置为3秒循环一次，90%-95%的时间完成眨眼动作，其余时间保持睁眼状态，模拟自然眨眼频率
• 若要调整眨眼速度或频率，修改animation里的时长（比如2s）或关键帧的百分比即可

内容的提问来源于stack exchange，提问作者Natalia