資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學使用 CSS 動畫顯示隱藏元素
CSS 動畫允許我們顯示隱藏元素。可以使用 opacity 屬性設定元素為隱藏狀態。將 opacity 設定為 0，元素將隱藏。要顯示它，請設定 transition 屬性以及 opacity 屬性，並設定 transition duration 屬性以使其看起來像淡入效果。
設定容器
設定容器 div。在其中，設定兩個子 div：
<div class="item"> <div class="hidden-one"></div> <div class="demo"></div> </div>
隱藏子 div
將子 div 的 opacity 值設定為 0，使其在頁面載入時不可見。此處為相同的 opacity 屬性設定了 transition：
.hidden-one {
background-color: #880;
border-radius: 3px;
height: 120px;
width: 55px;
position: absolute;
left: 280px;
top: 140px;
opacity: 0;
transition: opacity 0.8s;
}
顯示另一個 div
另一個 div 以圓圈的形式顯示；
.demo {
position: absolute;
height: 150px;
width: 150px;
background-color: firebrick;
border-radius: 50%;
left: 100px;
top: 50px;
z-index: 2;
}
懸停 div 以顯示隱藏的 div
當懸停在圓圈 div 上時，隱藏的 div 將使用 animation 屬性顯示動畫。動畫名稱為 yo，持續時間為 1 秒。
animation 屬性也用於動畫：
animation-name: yo 1s ease;
上面設定了 animation 簡寫屬性：
animation-name 設定為 yo。
animation duration 設定為 1s，即 1 秒
animation-timing-function 設定動畫的速度曲線。ease 的起始速度較慢，然後加快，最後緩慢結束
這裡是：
.item:hover .demo {
animation-name: yo 1s ease;
}
動畫規則
使用 @keyframes 設定動畫規則：
@keyframes yo {
0% {
}
30% {
transform: rotate3D(-1,1,0.1,10deg) scale(1.05);
}
50% {
transform: rotate3D(1,-1,0.1,10deg) scale(1.05);
}
100% {
}
}
示例
下面的示例顯示瞭如何使用 CSS 動畫顯示元素。
<!DOCTYPE html>
<html>
<style>
.item {
position: relative;
perspective: 1000px;
}
.demo, .hidden-one {
background: lightgreen;
box-shadow: 0 5px 12px rgba(0,0,0,0.6);
}
.item:hover .hidden-one{
animation: yoyo 1.4s backwards ease;
}
.item:hover .demo {
animation-name: yo 1s ease;
}
.demo {
position: absolute;
height: 150px;
width: 150px;
background-color: firebrick;
border-radius: 50%;
left: 100px;
top: 50px;
z-index: 2;
}
.hidden-one {
background-color: #880;
border-radius: 3px;
height: 120px;
width: 55px;
position: absolute;
left: 280px;
top: 140px;
opacity: 0;
transition: opacity 0.8s;
}
@keyframes yoyo {
0% {
top: 140px;
opacity: 0;
left: 70px;
z-index: 1;
}
50% {
left: 12px;
opacity: 1;
z-index: 2;
top: 140px;
}
100% {
opacity: 1;
left: 150px;
z-index: 3;
}
}
@keyframes yo {
0% {
}
30% {
transform: rotate3D(-1,1,0.1,10deg) scale(1.05);
}
50% {
transform: rotate3D(1,-1,0.1,10deg) scale(1.05);
}
100% {
}
}
</style>
<body>
<div class="item">
<div class="hidden-one"></div>
<div class="demo"></div>
</div>
</body>
</html>
更新於：2023年12月26日
1K+ 次瀏覽
廣告