css如何實(shí)現(xiàn)鼠標(biāo)移上去旋轉(zhuǎn)效果

發(fā)布時(shí)間：2022-01-20 16:37:59 來(lái)源：億速云閱讀：850 作者：清風(fēng) 欄目：web開(kāi)發(fā)

本文將為大家詳細(xì)介紹“css如何實(shí)現(xiàn)鼠標(biāo)移上去旋轉(zhuǎn)效果”，內(nèi)容步驟清晰詳細(xì)，細(xì)節(jié)處理妥當(dāng)，而小編每天都會(huì)更新不同的知識(shí)點(diǎn)，希望這篇“css如何實(shí)現(xiàn)鼠標(biāo)移上去旋轉(zhuǎn)效果”能夠給你意想不到的收獲，請(qǐng)大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識(shí)吧。

方法：1、用“@keyframes 動(dòng)畫(huà)名{100% {transform:rotate(角度)}”創(chuàng)建旋轉(zhuǎn)動(dòng)畫(huà)；2、用“元素:hover{animation:動(dòng)畫(huà)名時(shí)間 linear infinite}”設(shè)置在鼠標(biāo)移上元素時(shí)觸發(fā)動(dòng)畫(huà)。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css實(shí)現(xiàn)鼠標(biāo)移上去旋轉(zhuǎn)效果

旋轉(zhuǎn)效果可以利用animation屬性和“@keyframes”規(guī)則創(chuàng)建動(dòng)畫(huà)實(shí)現(xiàn)。
而鼠標(biāo)移上元素，觸發(fā)旋轉(zhuǎn)動(dòng)畫(huà)需要使用:hover選擇器。（:hover 選擇器用于選擇鼠標(biāo)指針浮動(dòng)在上面的元素，并設(shè)置樣式。）

實(shí)現(xiàn)代碼：

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				width: 100px;
				height: 100px;
				background-color: red;
				margin: 50px auto;
			}

			div:hover {
				animation: mymove 1s linear infinite;
			}

			@keyframes mymove {
				100% {
					transform: rotate(360deg);
				}

			}

			@-webkit-keyframes mymove {/* Safari and Chrome */
				100% {
					transform: rotate(360deg);
				}

			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

css如何實(shí)現(xiàn)鼠標(biāo)移上去旋轉(zhuǎn)效果

css的全稱(chēng)是什么

css的全稱(chēng)是Cascading Style Sheets（層疊樣式表），它是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。

感謝您能讀到這里，小編希望您對(duì)“css如何實(shí)現(xiàn)鼠標(biāo)移上去旋轉(zhuǎn)效果”這一關(guān)鍵問(wèn)題有了從實(shí)踐層面最深刻的體會(huì)，具體使用情況還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

css如何實(shí)現(xiàn)鼠標(biāo)移上去旋轉(zhuǎn)效果

css的全稱(chēng)是什么

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽