在不使用 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 次浏览

开启你的 职业生涯

完成课程以获得认证

开始