CSS可以讓圖片出現各種神奇的動畫效果,比如讓圖片轉起來,只需要幾行代碼就可以搞定!
.container { position: relative; width: 200px; height: 200px; } .container img { position: absolute; top: 0; left: 0; animation: spin 2s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
首先,我們需要將圖片放在一個容器中(這里使用class名為.container的div元素)。然后給圖片添加一些CSS屬性,如絕對定位,以及使用CSS動畫的關鍵幀(即@keyframes)來定義圖片的旋轉動畫。在這個例子中,我們使用了一個名為“spin”的CSS動畫,該動畫旋轉圖片,從0度到360度,持續時間為2秒,并且是線性的,并且無限循環。
現在,當您將這些代碼添加到您的css文件中并將圖片添加到您的html頁面中時,您應該看到圖像不斷旋轉。
當然,這只是CSS中許多驚人動畫效果的一種。盡情地嘗試吧!
下一篇css讓圖片過渡