如何用HTML、CSS、JS实现圆形转两侧带圆角半圆弧动画？

以下是完整实现代码，可完成从初始圆形到两侧带圆角半圆弧的平滑动画效果：

HTML 结构 #

<div class="shape"></div>

CSS 样式 #

.shape {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #f00;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s ease;
}

.shape::before,
.shape::after {
  content: "";
  display: block;
  width: 25px;
  height: 50px;
  background-color: #f00;
  position: absolute;
  top: 50%;
  transition: all 0.5s ease;
}

.shape::before {
  left: 0;
  transform: translate(-50%, -50%) rotate(-45deg);
  border-top-right-radius: 25px;
  opacity: 0;
}

.shape::after {
  right: 0;
  transform: translate(50%, -50%) rotate(45deg);
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  opacity: 0;
}

.shape.target-shape {
  border-radius: 0;
  width: 75px;
}

.shape.target-shape::before,
.shape.target-shape::after {
  opacity: 1;
}

JavaScript 逻辑 #

window.addEventListener('load', () => {
  const shape = document.querySelector('.shape');
  
  // 页面加载1秒后自动触发形状切换
  setTimeout(() => {
    shape.classList.add('target-shape');
  }, 1000);
  
  // 点击图形可切换回圆形/切换到目标形状
  shape.addEventListener('click', () => {
    shape.classList.toggle('target-shape');
  });
});

实现说明 #

• 初始状态下，.shape是红色圆形，两个伪元素设为透明隐藏，保持纯圆形外观。
• 添加target-shape类后，主元素调整宽度与圆角属性，同时显示两侧伪元素，组合成目标半圆弧样式。
• 所有元素添加transition属性，确保形状转变过程平滑过渡。
• JS部分实现自动触发动画，同时支持点击交互切换形状。

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