第一個案例是一個簡單的淡入淡出效果。在這個案例中,我們將使用 CSS 的 transition 屬性來創建一個漸變動畫效果。,我們要創建一個 div 元素,并為其添加一個初始樣式,例如背景顏色為白色。然后,我們將為 div 元素設置一個 :hover 偽類,當鼠標懸停在 div 元素上時,將其背景顏色改為黑色。在這種情況下,我們可以使用 transition 屬性來指定漸變效果的持續時間,使其以平滑的方式進行過渡。
<style> .fading-div { background-color: white; transition: background-color 0.5s ease; } <br> .fading-div:hover { background-color: black; } </style> <br> <div class="fading-div"> This is a fading div. </div>
在第二個案例中,我們將展示如何使用 CSS 的 transform 屬性創建一個旋轉動畫效果。在這個案例中,我們將使用一個按鈕來觸發旋轉動畫。,我們要創建一個 div 元素,并為其添加一個起始樣式,例如寬度和高度為100px,并設置背景顏色為紅色。然后,我們將為 div 元素創建一個按鈕,并給它添加一個點擊事件。在點擊事件中,我們將使用 transform 屬性來將 div 元素旋轉90度。這樣,每次點擊按鈕,div 元素都會順時針旋轉90度。
<style> .rotating-div { width: 100px; height: 100px; background-color: red; transition: transform 0.5s ease; } <br> .rotated { transform: rotate(90deg); } </style> <br> <div id="rotatingDiv" class="rotating-div"></div> <button onclick="rotateDiv()">Rotate</button> <br> <script> function rotateDiv() { var div = document.getElementById("rotatingDiv"); div.classList.toggle("rotated"); } </script>
在最后一個案例中,我們將展示如何使用 CSS 的 keyframes 功能來創建一個動態的平移動畫效果。在這個案例中,我們將使用一個按鈕來觸發平移動畫。,我們要創建一個 div 元素,并為其添加起始樣式,例如寬度和高度為100px,并設置背景顏色為綠色。然后,我們將為 div 元素創建一個按鈕,并給它添加一個點擊事件。在點擊事件中,我們將為 div 元素添加一個動畫類,并使用 keyframes 屬性來定義動畫的關鍵幀。在這種情況下,我們將 div 元素從初始位置平移到目標位置,并指定動畫的持續時間和緩動函數。
<style> .moving-div { width: 100px; height: 100px; background-color: green; } <br> .move-animation { animation: move 2s ease; } <br> @keyframes move { 0% { transform: translateX(0px); } 100% { transform: translateX(200px); } } </style> <br> <div id="movingDiv" class="moving-div"></div> <button onclick="moveDiv()">Move</button> <br> <script> function moveDiv() { var div = document.getElementById("movingDiv"); div.classList.add("move-animation"); } </script>
通過上述案例的解釋,我們可以看到使用 div 和 CSS 動畫可以實現各種各樣的交互效果。無論是淡入淡出、旋轉,還是平移,都可以通過調整樣式屬性和動畫效果的參數來實現不同的效果。了解和掌握 div CSS 動畫的使用方法,將幫助我們在網頁中增添更多生動和吸引人的元素,提升用戶體驗。