CSS3是一種用于美化頁面的強大工具,它擁有許多令人驚嘆的功能,其中之一是圖片向屏幕內(nèi)旋轉(zhuǎn)。
.image{ width: 200px; height: 200px; background-image: url("img.jpg"); background-size: cover; margin: 0 auto; position: relative; animation: spin 5s linear infinite; } @keyframes spin{ 0%{transform: rotateY(0deg);} 100%{transform: rotateY(360deg);} }
在上面的代碼中,“.image”是一個相對定位元素,我們使用了一個關(guān)鍵幀動畫來讓圖片向屏幕內(nèi)旋轉(zhuǎn)。我們設置元素從0度旋轉(zhuǎn)到360度,動畫時間為5秒,并使用linear軌跡。
我們還通過在元素上設置“background-image”屬性來添加圖片。我們設置圖像的大小為“cover”,使其填充整個元素。
最后,我們將元素的“position”屬性設置為“relative”,使其相對于其父元素進行定位。
通過使用CSS3中的這些功能,您可以輕松地使您的網(wǎng)站更加令人愉悅和令人難忘。
上一篇css3圖片平滑替換
下一篇css3圖片改變