CSS震動圖片效果

一、什麼是CSS震動圖片效果？

CSS震動圖片效果是一種在網頁中使用CSS代碼來讓圖片產生震動效果的技術。這種效果很容易吸引用戶的視線，常用於網頁廣告或者其他需要為網站增強視覺效果的地方。

下面是一個簡單的CSS代碼示例：

<style>
    .shake-image {
        position: relative;
        animation: shake 0.5s ease-in-out infinite;
    }

    @keyframes shake {
        0% {transform: translate(0, 0)}
        10%, 30%, 50%, 70%, 90% {transform: translate(-10px, 0)}
        20%, 40%, 60%, 80% {transform: translate(10px, 0)}
        100% {transform: translate(0, 0)}
    }
</style>

<img src="path/to/image.jpg" class="shake-image" width="200" height="200">

這段代碼的作用是在圖片上添加「shake-image」這個class，通過animation屬性指定一段「shake」動畫的實現過程。

二、如何實現CSS震動圖片效果？

1. CSS動畫

CSS3提供了animation屬性，可以用來創建動畫效果，包括CSS震動圖片效果。

舉個例子，下面是通過CSS動畫實現的一段CSS代碼。

<style>
    .shake-image {
        position: relative;
        animation: shake 0.5s ease-in-out infinite;
    }

    @keyframes shake {
        0% {transform: translate(0, 0)}
        10%, 30%, 50%, 70%, 90% {transform: translate(-10px, 0)}
        20%, 40%, 60%, 80% {transform: translate(10px, 0)}
        100% {transform: translate(0, 0)}
    }
</style>

<img src="path/to/image.jpg" class="shake-image" width="200" height="200">

代碼中，「shake-image」是圖片的CSS類名，animation是動畫屬性，表示在0.5秒內，以ease-in-out速度和無窮大的循環次數執行「shake」動畫。

「shake」動畫通過@keyframes定義，分別指定了不同時間點圖片的位置。通過transform的translate屬性控制圖片的位置，從而實現震動效果。

2. JavaScript實現

除了使用CSS動畫，還可以通過JavaScript代碼實現CSS震動圖片效果。

代碼如下：

<div id="shake-image" style="position:relative">
    <img src="path/to/image.jpg" width="200" height="200">
</div>
<script>
    var image = document.querySelector('#shake-image img');
    var interval;
    var startPosition = {x: 0, y: 0};
    var move = function() {
        var randomX = Math.floor(Math.random() * 11) - 5;
        var randomY = Math.floor(Math.random() * 11) - 5;
        var pos = {
            x: (startPosition.x + randomX) + 'px',
            y: (startPosition.y + randomY) + 'px'
        };
        image.style.left = pos.x;
        image.style.top = pos.y;
    }
    image.onmouseover = function() {
        startPosition = {
            x: parseInt(image.style.left, 10),
            y: parseInt(image.style.top, 10)
        };
        interval = setInterval(move, 100);
    }
    image.onmouseout = function() {
        clearInterval(interval);
        image.style.left = startPosition.x + 'px';
        image.style.top = startPosition.y + 'px';
    }
</script>

代碼中，鼠標懸浮在圖片上時，會觸發onmouseover事件，啟動震動效果。通過設置一個周期性的interval函數，循環執行move函數修改圖片的位置，從而產生震動效果。

當鼠標移出圖片時，會觸發onmouseout事件，停止震動效果。

三、CSS震動圖片效果的優缺點

1. 優點

通過CSS震動圖片效果，可以大大增強網站的視覺效果，吸引用戶的注意力。並且實現方法簡單，可以通過一些簡單的CSS代碼或JavaScript代碼實現。

2. 缺點

CSS震動圖片效果可能會影響網頁的性能，特別是在加載大量圖片時。此外，如果使用過多的震動效果，會使網站的視覺效果混亂，影響用戶體驗。

四、結論

CSS震動圖片效果是一個簡單有效的增強網站視覺效果的技術。雖然該技術有優勢，但使用過度會影響網站性能及用戶體驗。開發者需謹慎把握時機使用該技術。