<div> CSS動態效果是指通過使用CSS樣式來實現元素的動態變化，包括伸縮、旋轉、淡入淡出等效果。在前端開發中，可以使用CSS定義元素的樣式和布局，通過添加、刪除或修改CSS類來改變元素的外觀和動畫效果。本文將詳細解釋幾個常見的動態效果，以幫助讀者更好地理解和應用這些CSS動態屬性和方法。
<1.淡入淡出效果>

淡入淡出效果是指元素的透明度從0到1的漸變過程，使元素從不可見逐漸變為可見。要實現這個效果，可以使用CSS3的transition屬性和opacity屬性。

，設置元素的初始透明度為0，并在元素上添加如下樣式：

<div class="fade-effect">
Hello World
</div>
<br>
<style>
.fade-effect {
opacity: 0;
transition: opacity 1s;
}
</style>

然后，通過添加一個CSS類來觸發淡入淡出效果：

<button onclick="toggleFade()">Toggle Fade</button>
<br>
<script>
function toggleFade() {
var element = document.querySelector(".fade-effect");
element.classList.toggle("fade-in");
}
</script>
<br>
<p>通過點擊按鈕，可以切換元素的透明度，從而實現淡入淡出效果。</p>
<br>
<2.旋轉效果>
<br>
<p>旋轉效果是通過改變元素的旋轉角度來實現的。要實現這個效果，可以使用CSS3的<code>transform</code>屬性，并通過添加一個CSS類來觸發旋轉效果。</p>
<br>
<p>，將元素旋轉45度，并在元素上添加如下樣式：</p>
<br>
<pre>
<div class="rotate-effect">
Hello World
</div>
<br>
<style>
.rotate-effect {
transform: rotate(45deg);
transition: transform 1s;
}
</style>

然后，通過添加一個CSS類來觸發旋轉效果：

<button onclick="toggleRotate()">Toggle Rotate</button>
<br>
<script>
function toggleRotate() {
var element = document.querySelector(".rotate-effect");
element.classList.toggle("rotate");
}
</script>
<br>
<p>通過點擊按鈕，可以切換元素的旋轉角度，從而實現旋轉效果。</p>
<br>
<3.伸縮效果>
<br>
<p>伸縮效果是指改變元素的大小，使其從初始大小逐漸變大或變小。要實現這個效果，可以使用CSS3的<code>transform</code>屬性，并通過添加一個CSS類來觸發伸縮效果。</p>
<br>
<p>，將元素從初始大小變為2倍大小，并在元素上添加如下樣式：</p>
<br>
<pre>
<div class="scale-effect">
Hello World
</div>
<br>
<style>
.scale-effect {
transform: scale(2);
transition: transform 1s;
}
</style>

然后，通過添加一個CSS類來觸發伸縮效果：

<button onclick="toggleScale()">Toggle Scale</button>
<script>
function toggleScale() {
var element = document.querySelector(".scale-effect");
element.classList.toggle("scale");
}
</script>
通過點擊按鈕，可以切換元素的大小，從而實現伸縮效果。

以上是三個常見的CSS動態效果的實現方法。通過使用CSS樣式和相關的CSS動態屬性和方法，可以為網頁添加更多的交互和視覺效果，從而提升用戶體驗和頁面的吸引力。