在 CSS 中设置淡入淡出
-
在 CSS 中使用
opacity
和visibility
属性以及transition
属性设置过渡 -
在 CSS 中使用
height
、opacity
和overflow
属性以及transition
属性设置过渡
本文将介绍 CSS 中设置过渡的方法。我们将学习在 opacity
、height
和 visibility
上使用过渡来在悬停和悬停时提供淡入和淡出效果。
在 CSS 中使用 opacity
和 visibility
属性以及 transition
属性设置过渡
我们不能在 CSS 的 display
属性中使用 transition
属性。例如,我们不能使用 CSS transition
属性在悬停(鼠标进入)后将 display : none
更改为 display : block
,反之亦然。因此,我们可以使用 opacity
和 visibility
属性以及过渡来为项目提供淡入和淡出效果。Transition 具有某些属性,例如 transition-property
、transition-duration
、transition-timing-function
和 transition-delay
。我们也可以使用 transition 速记属性作为 transition : opacity 2s linear 1s
。这里 opacity
表示 transition-property
,2s
表示 transition-duration
,linear
表示 transition-timing-function
,而 1s
表示 transition-delay
。我们可以使用悬停来试验 transition
。
例如,创建一个 div
并使用 ul
和 li
标签创建一个包含三个无序列表项的列表。给 div
一个 1px solid black
的边框以查看它。将 ul
的属性设置为 opacity: 0
和 visibility: hidden
和 transition: visibility 0s, opacity 0.6s linear
。我们同时使用 opacity
和 visibility
因为如果我们只使用 opacity: 0
,项目仍然可以点击和悬停。将 ul
悬停属性设置为 visibility: visible
和 opacity: 1
,以便 ul
的列表项仅在悬停时显示一些 transition
效果。
下面的示例显示 ul
的项目仅在悬停时可见。这些项目在 0.6 秒内以线性效果出现,并在将鼠标移开时再次隐藏。
示例代码:
<div>
<ul>
<li> Apple </li>
<li> Banana </li>
<li> Mango </li>
</ul>
</div>
div {
border : 1px solid black;
}
div > ul {
visibility: hidden;
opacity: 0;
transition : visibility 0s, opacity 0.6s linear;
}
div:hover > ul {
visibility : visible;
opacity : 1;
}
在 CSS 中使用 height
、opacity
和 overflow
属性以及 transition
属性设置过渡
另一种在 display: none
和 display: block
上使用过渡的替代方法可能是与过渡一起使用的 height
、overflow
和 opacity
属性。我们可以为列表设置 opacity : 0
和 height : 0
以便看不到项目。我们还必须设置 overflow: hidden
,以便项目不会超出 div
而 transition-duration
需要时间。我们可以像第一种方法一样使用 transition
速记属性。
例如,创建一个 div
并使用 ul
和 li
标签创建一个包含三个无序项目的列表。给 div
一个 1px solid black
边框,与第一种方法相同。将 ul
的属性设置为 opacity: 0
、overflow: hidden
和 height: 0
。将 transition
属性的值设置为 opacity 0.6s ease-in
。将 ul
悬停属性设置为 height: auto
和 opacity: 1
,以便 ul
的列表项仅在悬停时显示一些 transition
效果。
下面的例子显示 div
为空,div
的 height
为 0px
。但是,当我们将鼠标悬停在 div
上时,项目列表会以 ease-in
效果显示。ease-in
选项设置过渡的缓慢开始。div
的 height
属性变为 auto
。当我们从 div
中悬停时,它又变成了空的。
示例代码:
<div>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ul>
</div>
div {
border: 1px solid black;
}
div > ul {
opacity: 0;
height: 0;
overflow: hidden;
transition: opacity 0.6s ease-in;
}
div:hover > ul {
opacity: 1;
height: auto;
}