创建 CSS 动画,以实现悬停在元素上时的平滑过渡效果,这意味着悬停在元素上时应该出现过渡。
我无法在悬停时创建平滑的动画/过渡效果,我想在悬停在元素上时制作平滑且干净的悬停效果。
使用
transition
属性为元素添加平滑过渡:CSS Transition Property
一个例子:
.normal {
width: 100px;
height: 100px;
background: #ddd;
text-align: center;
}
.smooth {
width: 100px;
height: 100px;
background: black;
color: white;
text-align: center;
transition: width 3s;
}
.smooth:hover,
.normal:hover {
width: 200px;
}
<div class="normal">Normal Transition</div>
<div class="smooth">Smooth Transition</div>
或者你可以使用 CSS 动画
div {
width: 100px;
height: 100px;
background-color: black;
color: white;
text-align:center;
}
div:hover {
animation-name: animation1;
animation-duration: 3s;
}
@keyframes animation1 {
from {
width: 100px;
}
to {
width: 200px;
}
}
<div>Hover</div>