悬停时将 CSS 白点分成两半，在 React Chakra UI 中对角线拆分

Question

这就是我想要完成的任务，正如您在图像中看到的，“透视”一词旁边有一个白点

之前

之后

悬停时，它会沿对角线分成两半。 已在本网站实现：Sequoiacap

我的任务：{/* TODO：在 OG 网站中，这个白色圆圈对角线分成两半，然后右侧拼接部分向下移动，因此看起来圆圈的两半仍然相互接触，但就像对角线切片的苹果和顶部零件因重力而向下滑动 */}

我必须使用 Chakra UI @ 2.10.4 在 React 中实现相同的目标（不是新的！）

需要注意的重要一点是，那些 OG 开发人员没有使用任何 svg 图像，至少我找不到可以下载的

这就是我所做的工作：

` {/* TODO：在 OG 网站中，这个白色圆圈对角线一分为二，然后右侧的分割部分向下移动，因此看起来圆圈的两半仍然相互接触，但就像苹果对角线切成两半，顶部部分向下滑动重力 */}

            {/* <Box
              w="10px"
              h="10px"
              borderRadius="full"
              bg="white"
              mr={2}
              _hover={{
                w: "20px",
                h: "10px",
                borderRadius: "50%",
                bg: "white",
                display: "flex",
                justifyContent: "space-between",
              }}
            /> */}
            <Box
              mr={2}
              position="relative"
              w="20px"
              h="20px"
              borderRadius="full"
              overflow="hidden"
              _hover={{
                "& .circle": { opacity: 0 }, // Fade out the white circle
                "& .split-image": { opacity: 1 }, // Show the split image
              }}
            >
              {/* Default White Circle */}
              <Box
                className="circle"
                w="100%"
                h="100%"
                bg="white"
                position="absolute"
                top="0"
                left="0"
                transition="opacity 0.1s "
              />

              {/* Hidden Split Circle Image */}
              <Image
                src={Split}
                alt="Split Circle"
                className="split-image"
                position="absolute"
                w="100%"
                h="100%"
                top="0"
                left="0"
                opacity="0" // Hidden by default
                transition="opacity 0.1s"
              />
            </Box>

            <Text>PERSPECTIVE</Text>
          </Box>`

它既不干净也不优雅，因为我是初学者，我很好奇这是如何实现的，如果我想实现同样的目标，我该怎么做？

我尝试了 _before:: 和 _after:: 但它对我来说太先进了，所以我的解决方法是在悬停时用隐藏的预分割图像替换白点

Answer 1

希望这有帮助。

HTML 代码

<div class="circle-wrapper">
      
  <div class="circle-a"></div>
  <div class="circle-b"></div>
      
</div> <!-- circle wrapper -->

CSS代码

.circle-wrapper {
  position: relative;
}

.circle-wrapper .circle-a {
  width: 0;
  height: 0;
  border: 24px orange solid;
  border-top: 24px transparent solid;
  border-right: 24px transparent solid;
  border-radius: 40px;
}

.circle-wrapper .circle-b {
  width: 0;
  height: 0;
  border: 24px orange solid;
  border-bottom: 24px transparent solid;
  border-left: 24px transparent solid;
  border-radius: 40px;
  position: absolute;
  top: 0;
  transform: translate(12px, 12px);
}

结果