資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究使用 CSS 實現淡入動畫效果
我們知道 CSS 為開發者提供了過多的功能。有些只能透過調整現有的功能來實現，而另一些則可以直接實現。例如，不同的動畫可以應用於不同的網站元素。其中之一就是 **淡入動畫**。
在淡入動畫中，當滑鼠懸停在某個物件上時，它看起來會變暗。實現此結果的方法有很多種。我們使用此技術來吸引使用者對某個特定按鈕或影像的注意。我們可以透過調整元素的不透明度來實現這一點。
示例
讓我們看看下面的示例，我們將為影像建立淡入動畫。
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 50px;
margin: 50px;
}
.tp {
opacity: 40%;
transition: opacity 0.4s;
}
.tp:hover {
opacity: 100%;
transition: opacity 0.4s;
}
</style>
</head>
<body style="background-color:#F4ECF7">
<div class="tp">
<img src="https://tutorialspoint.tw/cg/images/logo.png"></img>
</div>
</body>
</html>
當我們執行以上程式碼時，它將生成一個包含影像的輸出，該影像具有較低的不透明度。當用戶嘗試將滑鼠懸停在其上時，它會在網頁上顯示得更亮。
示例
考慮另一種情況，我們將為文字建立淡入動畫。
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
font-family: verdana;
align-items: center;
color: #DE3163;
background-color: #EAFAF1;
}
h2 {
font-size: 100px;
}
.tp {
margin: 60px;
padding: 20px;
}
.x {
opacity: 0;
cursor: pointer;
transition: 0.35s;
}
.x:hover {
opacity: 1;
}
</style>
</head>
<body>
<div class="tp">
<h2 class="x">Welcome</h2>
</div>
</body>
</html>
執行以上程式碼後，輸出視窗將彈出，當用戶嘗試將滑鼠懸停在螢幕上時，它將在網頁上顯示文字。
示例
在下面的示例中，我們將為按鈕建立淡入動畫。
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 100px;
margin: 100px;
}
.tp {
opacity: 30%;
transition: opacity 0.4s
}
.tp:hover {
opacity: 100%;
transition: opacity 0.4s
}
</style>
</head>
<body style="background-color:#E8DAEF">
<div class="tp">
<button type="button">Click To Submit</button>
</div>
</body>
</html>
執行以上程式碼後，它將生成一個包含按鈕的輸出，該按鈕具有較低的不透明度。稍後，當用戶將滑鼠懸停在其上時，它將在網頁上顯示得更亮。
更新於: 2024年1月8日
451 次瀏覽
廣告