在React+Chakra UI v2.10.4中实现鼠标悬停时白色圆点斜向分裂并偏移的动效

嘿，我懂你想要复刻那个超酷的悬停分裂动效，而且不想依赖预切图片的方案对吧？其实不用找SVG或者切图，咱们用Chakra UI v2.10.4的样式系统+纯CSS动画就能完美实现，比图片方案更灵活还不占额外资源～

先给你拆解一下原网站的实现思路：他们其实是用两个半圆元素拼合成一个完整的圆，然后在鼠标悬停时，让其中一个半圆做向下的位移动画，同时配合平滑的过渡效果，就产生了“斜切后下落”的视觉感。

下面是针对Chakra UI v2.10.4的具体实现代码，完全不需要图片：

import { Flex, Box, Text } from "@chakra-ui/react";

export default function PerspectiveDot() {
  return (
    <Flex justifyContent="space-between">
      <Box display="inline-flex" alignItems="center">
        {/* 父容器：控制整体圆形外观，溢出隐藏 */}
        <Box
          mr={2}
          position="relative"
          w="10px"
          h="10px"
          borderRadius="full"
          overflow="hidden"
          // 给父容器加过渡，确保子元素动画平滑
          transition="all 0.3s ease"
          _hover={{
            // 悬停时父容器宽度稍微变宽，适配半圆位移后的空间
            w: "14px",
          }}
        >
          {/* 左上半圆：默认显示，悬停时位置不变 */}
          <Box
            position="absolute"
            top="0"
            left="0"
            w="100%"
            h="100%"
            bg="white"
            // 裁剪出左上半圆
            clipPath="polygon(0 0, 100% 0, 0 100%)"
            transition="all 0.3s ease"
          />

          {/* 右下半圆：悬停时向下偏移 */}
          <Box
            position="absolute"
            top="0"
            left="0"
            w="100%"
            h="100%"
            bg="white"
            // 裁剪出右下半圆
            clipPath="polygon(100% 0, 100% 100%, 0 100%)"
            transition="all 0.3s ease"
            // 悬停时的位移效果
            _hover={{
              top: "4px",
              left: "4px",
            }}
          />
        </Box>

        <Text>PERSPECTIVE</Text>
      </Box>
    </Flex>
  );
}

关键细节解释： #

• clip-path：用多边形裁剪出两个半圆，polygon()里的坐标点可以精准控制裁剪形状，这是实现无图片分裂的核心。
• 过渡动画：给父容器和两个半圆都加上transition属性，让整个动效平滑不生硬，你可以调整0.3s这个数值来控制动画快慢。
• 悬停位移：右下半圆在hover时的top和left偏移量可以根据你的需求调整，我这里设的4px是模拟“下落”的效果，你可以改成更贴合原网站的数值。

对比你之前用图片替换的方案，这个纯CSS实现的好处是：

• 不用额外加载图片，页面加载更快
• 缩放时不会出现模糊（矢量级的渲染）
• 可以随时调整颜色、大小、动画速度，灵活性拉满

如果你觉得clip-path不好理解，也可以用另一种方式：把两个半圆做成正方形的一半，用border-radius配合overflow:hidden，不过clip-path的方式更直观精准。

备注：内容来源于stack exchange，提问作者XORPORTUGAL