使用 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="{{"></motion.img>
        )}
      

      
        {懸停&& (
          <motion.div classname="absolute inset-0 flex items-center justify-center w-full" initial="{{" opacity: animate="{{" exit="{{">
            ;設定顯示影片（真）}
              onMouseLeave={() =>;設定顯示影片（假）}
            >
              
              <p classname="text-[10px] flex font-semibold">觀看影片</p>
            按鈕>
          </motion.div>
        )}
      
      {/* 影片工具提示 */}
      <animatepresence>
        {顯示影片&&(
          <motion.div y y:>




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

            
        </htmlelement>

以上是使用 Typescript、Tailwind 和 Framer Motion 的動畫懸停徽標的詳細內容。更多資訊請關注PHP中文網其他相關文章！