做一个圆形，然后变成一个类似半圆形的形状，两边都有订单

Question

我想用 html, css, js 做一个像这样的形状 () 一个原本只是一个圆的形状，变成了一条半线，形成了一个半圆，两边都有一个边界半径。 我只想用 html、css 和 js 来制作它。我需要什么代码来生成代码和动画。

HTML：

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

CSS：

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

.shape::before {
  content: "";
  display: block;
  width: 25px;
  height: 50px;
  background-color: #f00;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%) rotate(-45deg);
  border-top-right-radius: 25px;
}

.shape::after {
  content: "";
  display: block;
  width: 25px;
  height: 50px;
  background-color: #f00;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%) rotate(45deg);
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}

.shape.hide-semi-circle::after {
  display: none;
}

Answer 1

首先，

.shape

需要是正方形；将其位置设置为

relative

（忽略变量）。我们需要

absolute

-ly定位它的

::before

和

::after

伪元素。

.shape {
    position: relative;
    height: var(--size);
    aspect-ratio: 1 / 1;
}

然后，设置样式。注意

border-

属性是如何使用的。

.shape::before, .shape::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 50%;
    border: var(--border) solid var(--color);
    border-bottom: 0;
    border-radius: var(--size) var(--size) 0 0;
}

翻转

::after

绕 x 轴 180 度。添加一个

.hover

规则，当我们将鼠标悬停在

opacity

上时，它的

.shape

会发生变化。

.shape::after {
  transform: rotateX(180deg);
  transform-origin: calc(var(--size) / 2) calc(var(--size) / 2);
  transition: opacity var(--duration);
}

.shape:hover::after {
    opacity: 0;
}

最后，为了使末端看起来有曲线，使用另一个子元素并将其设置样式，使其成为具有相同颜色的圆圈：

.dot {
    position: absolute;
    top: calc(50% - var(--border) / 2);
    border-radius: 50%;
    height: var(--border);
    aspect-ratio: 1 / 1;
    background: var(--color);
    box-shadow: calc(var(--size) - var(--border)) 0 var(--color);
}

试试看：

.shape {
  --size: 100px;
  --border: 10px;
  --color: #f00;
  --duration: 0.5s;
}

.shape {
  position: relative;
  height: var(--size);
  aspect-ratio: 1 / 1;
}

.shape::before,
.shape::after {
  content: '';
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 50%;
  border: var(--border) solid var(--color);
  border-bottom: 0;
  border-radius: var(--size) var(--size) 0 0;
}

.shape::after {
  transform: rotateX(180deg);
  transform-origin: calc(var(--size) / 2) calc(var(--size) / 2);
  transition: opacity var(--duration);
}

.shape:hover::after {
  opacity: 0;
}

.dot {
  position: absolute;
  top: calc(50% - var(--border) / 2);
  border-radius: 50%;
  height: var(--border);
  aspect-ratio: 1 / 1;
  background: var(--color);
  box-shadow: calc(var(--size) - var(--border)) 0 var(--color);
}

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