我创建了一个CSS卡设计，并在卡底部的按钮的一些属性中添加了悬停转换。我为background和color属性添加了它们。遗憾的是，悬停动画并不流畅。背景颜色应该像文本一样在半秒内平滑地转换，但它会立即发生。
* {
margin: 0px;
padding: 0px;
font-family: "Roboto Slab";
outline: none;
border: 0px;
}
.Cards {
padding: 25px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.Card {
position: relative;
width: 400px;
margin: 15px;
display: flex;
flex-direction: column;
background: #FFFFFF;
box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.25);
}
.Card-Image {
width: 100%;
height: 225px;
}
.Card-Content {
padding: 20px 20px 0px 20px;
background: #BC4749;
}
.Card-Body {
padding: 15px;
background: #FFFFFF;
box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.25);
transform: translateY(-40px);
}
.Card-Title {
font-size: 22px;
font-weight: bold;
}
.Card-Description {
font-size: 16px;
margin-top: 10px;
}
.Card-List {
font-size: 16px;
list-style-type: square;
margin-top: 10px;
margin-left: 15px;
}
.Card-Button-Space {
display: flex;
justify-content: center;
align-items: center;
transform: translateY(-20px);
}
.Card-Button {
padding: 10px;
width: 100%;
font-size: 22px;
cursor: pointer;
transition: color 0.5s;
}
.Card-Button:hover {
background: #000000;
color: #FFFFFF;
}<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "style.css">
<link rel = "preconnect" href = "https://fonts.gstatic.com">
<link href = "https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap" rel = "stylesheet">
<title>ItsMrVaibhav - Card Design</title>
</head>
<body>
<div class = "Cards">
<div class = "Card">
<img class = "Card-Image" src = "https://source.unsplash.com/1600x900/?woods" alt = "Card Image">
<div class = "Card-Content">
<div class = "Card-Body">
<p class = "Card-Title">Card Title goes here</p>
<p class = "Card-Description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam ex dicta fuga repellat, labore ab earum dolorum, nemo quidem doloribus?</p>
<ul class = "Card-List">
<li>First sentence</li>
<li>Second sentence</li>
<li>Third sentence</li>
</ul>
<p class = "Card-Description">Ipsam optio assumenda nam, ex dicta fuga repellat aliquid amet eligendi beatae? Deleniti pariatur suscipit exercitationem natus.</p>
</div>
<div class = "Card-Button-Space">
<button class = "Card-Button">Click to Learn More</button>
</div>
</div>
</div>
</div>
</body>
</html>transition: color 0.5s;
这条线仅使应用于color属性的任何转换平滑。为了使背景过渡平滑，您需要为所有属性设置它。您可以使用all关键字来执行此操作。只需将上一行更改为下一行即可。
transition: all 0.5s;
此外，您还可以是特定的，并使用以下代码段仅将转换持续时间应用于这两个属性。
transition-property: background, color;
transition-duration: 0.5s;
使用transition-propertyCSS属性，可以针对特定的属性。
* {
margin: 0px;
padding: 0px;
font-family: "Roboto Slab";
outline: none;
border: 0px;
}
.Cards {
padding: 25px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.Card {
position: relative;
width: 400px;
margin: 15px;
display: flex;
flex-direction: column;
background: #FFFFFF;
box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.25);
}
.Card-Image {
width: 100%;
height: 225px;
}
.Card-Content {
padding: 20px 20px 0px 20px;
background: #BC4749;
}
.Card-Body {
padding: 15px;
background: #FFFFFF;
box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.25);
transform: translateY(-40px);
}
.Card-Title {
font-size: 22px;
font-weight: bold;
}
.Card-Description {
font-size: 16px;
margin-top: 10px;
}
.Card-List {
font-size: 16px;
list-style-type: square;
margin-top: 10px;
margin-left: 15px;
}
.Card-Button-Space {
display: flex;
justify-content: center;
align-items: center;
transform: translateY(-20px);
}
.Card-Button {
padding: 10px;
width: 100%;
font-size: 22px;
cursor: pointer;
transition: all 0.5s;
}
.Card-Button:hover {
background: #000000;
color: #FFFFFF;
}<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "style.css">
<link rel = "preconnect" href = "https://fonts.gstatic.com">
<link href = "https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap" rel = "stylesheet">
<title>ItsMrVaibhav - Card Design</title>
</head>
<body>
<div class = "Cards">
<div class = "Card">
<img class = "Card-Image" src = "https://source.unsplash.com/1600x900/?woods" alt = "Card Image">
<div class = "Card-Content">
<div class = "Card-Body">
<p class = "Card-Title">Card Title goes here</p>
<p class = "Card-Description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam ex dicta fuga repellat, labore ab earum dolorum, nemo quidem doloribus?</p>
<ul class = "Card-List">
<li>First sentence</li>
<li>Second sentence</li>
<li>Third sentence</li>
</ul>
<p class = "Card-Description">Ipsam optio assumenda nam, ex dicta fuga repellat aliquid amet eligendi beatae? Deleniti pariatur suscipit exercitationem natus.</p>
</div>
<div class = "Card-Button-Space">
<button class = "Card-Button">Click to Learn More</button>
</div>
</div>
</div>
</div>
</body>
</html>