使用 Typescript、Tailwind 和 Framer Motion 的动画悬停徽标

它将静态徽标转换为按钮，该按钮激活视频工具提示，该工具提示使用运动值跟随光标沿按钮轴的移动。

仔细检查后，您会发现我们使用了微动画。当徽标悬停在上方时，它会平滑地缩小并淡出，然后转换为放大并具有淡入效果的按钮。将鼠标悬停在按钮上会触发视频工具提示。

演示

源代码

徽标-hover.tsx

<script> // Detect dark theme var iframe = document.getElementById('tweet-1878748540677283930-90'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1878748540677283930&theme=dark" } </script>

从“react”导入{useState，useCallback}；
从“framer-motion”导入{motion，AnimatePresence，useMotionValue}；
从“lucide-react”导入{Play}；

导出默认函数LogoHover() {
  const [isHovered, setIsHovered] = useState(false);
  const [showVideo, setShowVideo] = useState(false);
  const x = useMotionValue(0);

  const handleMouseMove = useCallback(
    （事件：React.MouseEvent<htmlelement>）=> {
      const halfWidth = event.currentTarget.offsetWidth / 2;
      x.set(event.nativeEvent.offsetX - halfWidth);
    },
    [x]
  ）；

  返回 （
    <div classname="相对 w-[100px] h-[80px] 光标指针" onmouseenter="{()"> setIsHovered(true)} onMouseLeave={() =>; setIsHovered(假)}>
      <动画存在>
        {!isHovered && (
          // 更改为您自己的徽标
          <motion.img src="/theo-logo.png" alt="Wegic Logo" className="absolute inset-0 w-full h-full object-contain" initial={{ 不透明度: 1, 比例: 1 } } 退出={{ 不透明度：0，比例：0.8 }} 过渡={{ 持续时间：0.2 }} />
        )}
      </AnimatePresence>

      <动画存在>
        {悬停&& (
          <motion.div className="absolute inset-0 flex items-center justify-center w-full" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0, 比例: 0.8 }} 过渡={{ 持续时间: 0.2 }}>
            <按钮
              className =“flex w-完整项目-中心对齐-中心间隙-2 bg-白色边框边框-黑色h-10 py-2圆形-md”
              onMouseMove={handleMouseMove}
              onMouseEnter={() =>;设置显示视频（真）}
              onMouseLeave={() =>;设置显示视频（假）}
            >
              <播放尺寸={16} fill="white" strokeWidth={2} aria-hidden="true" />
              <p className="text-[10px] flex font-semibold">观看视频>
            </按钮>
          
        )}
      </AnimatePresence>
      {/* 视频工具提示 */}
      <animatepresence>
        {显示视频&&(
          <motion.div y y:>




          </motion.div></animatepresence>
</div>

            
        </htmlelement>

以上是使用 Typescript、Tailwind 和 Framer Motion 的动画悬停徽标的详细内容。更多信息请关注PHP中文网其他相关文章！