在不使用 CSS 的情況下在 React JS 中製作懸停時傾斜效果

在本文中，我們將瞭解如何在不使用 CSS 的情況下在 React.js 中新增懸停時傾斜效果。我們將在<div>元素上新增傾斜動畫效果。這種型別的效果可以立即吸引使用者的注意力，因為它會在懸停時傾斜特定部分，同時將其他元素保持在原始位置。

示例

首先下載react-parallax-tilt包 −

npm i --save react-parallax-tilt

此庫用於匯入<Tilt>容器，它將為任何元素新增傾斜效果。

在App.js中新增以下程式碼行 −

import Tilt from "react-parallax-tilt";

function App() {
   return (
      <Tilt>
         <div style={{ height: "300px", backgroundColor: "darkgreen"}}>
            <h1>React Parallax Tilt</h1>
         </div>
      </Tilt>
   );
}

export default App;

我們可以使用<Tilt>物件對任何元素新增傾斜效果，無論是卡片還是 div。甚至是按鈕或列表。

輸出

執行後，它將生成以下輸出 −

Ath Tripathi

更新於： 2021-09-28

407 次瀏覽

開啟你的 職業生涯

完成課程以獲得認證

開始