我正试图使用多个类在引导卡上获得提升的按钮效果和渐变动画
这是我迄今为止的代码
index.js
import Head from 'next/head'
import Nav from '../partials/nav'
import style from '../styles/Home.module.css'
import cx from 'classnames'
export default function Home() {
function handleClick(e) {
console.log(e)
}
return (
<div className="container-fluid">
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossOrigin="anonymous"></link>
</Head>
<main>
<Nav />
<div className="row row-cols-1 row-cols-md-2 category">
<div className="col mb-4">
<div className={cx[style.elevate,'card']} onClick={() => handleClick(1)}>
<img src="https://placekitten.com/380/200" className="card-img" alt="..." />
<div className="card-img-overlay text-white">
<h5 className="card-title">Card title</h5>
<p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p className="card-text">Last updated 3 mins ago</p>
</div>
</div>
</div>
<div className="col mb-4">
<div className="card text-white elevate" onClick={() => handleClick(2)}>
<img src="https://placekitten.com/380/200" className="card-img" alt="..." />
<div className="card-img-overlay">
<h5 className="card-title">Card title</h5>
<p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p className="card-text">Last updated 3 mins ago</p>
</div>
</div>
</div>
<div className="col mb-4">
<div className="card text-white elevate">
<img src="https://placekitten.com/380/200" className="card-img" alt="..." />
<div className="card-img-overlay">
<h5 className="card-title">Card title</h5>
<p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p className="card-text">Last updated 3 mins ago</p>
</div>
</div>
</div>
<div className="col mb-4">
<div className="card text-white elevate">
<img src="https://placekitten.com/380/200" className="card-img" alt="..." />
<div className="card-img-overlay">
<h5 className="card-title">Card title</h5>
<p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p className="card-text">Last updated 3 mins ago</p>
</div>
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossOrigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossOrigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossOrigin="anonymous"></script>
</div>
)
}
home.module.css
.elevate:hover {
box-shadow: 0 8px 8px rgba(0, 0, 0, .25);
margin: 5px;
cursor: pointer;
}
.elevate:hover {
opacity: 1;
transition: 1s;
/* A 1 second transition. */
}
.fade-in {
animation: fadeIn ease 2s;
-webkit-animation: fadeIn ease 2s;
-moz-animation: fadeIn ease 2s;
-o-animation: fadeIn ease 2s;
-ms-animation: fadeIn ease 2s;
}
如何使用classname＝"硬文本白色(bs(高架(home(">
有些景点说使用{style.class}，但这让我只能使用一个类。如何在相同的引号中获得多个css类？
尝试使用Template literals，我目前正在处理一个nextjs项目，遇到了同样的问题，使用Template literals为我解决了这个问题。
Egs
<div className={`d-flex ${classes.root} ${styles.parent}`}>
看看同样的方法是否适用于你。
className={"card text-white elevated"}
这对你有帮助(https://www.npmjs.com/package/classnames)