僅用CSS讓你的div模塊旋轉(zhuǎn)

2024-07-11 08:30:49

字體：大中小

供稿：網(wǎng)友

html語(yǔ)言編寫(xiě)，div或者table布局，css設(shè)置樣式，javascript設(shè)置響應(yīng)，交互，這就是我最初印象中網(wǎng)頁(yè)最基礎(chǔ)最原始的存在，于是在這里就給css定了性，設(shè)置樣式：樣式嘛，就好像是裝修的效果，只有最初的原始狀態(tài)和裝修后的狀態(tài)，都是靜態(tài)的，哪怕存在一個(gè)hover，也不過(guò)是對(duì)比之前之后的狀態(tài)而已，卻不曾想，今天碰到的這個(gè)解決辦法讓我又深深的震撼了一把。

問(wèn)題：如何讓你的一個(gè)div模塊旋轉(zhuǎn)？

復(fù)制代碼

代碼如下:
<span style="font-size:12px;"><div id="rotate" style="backgroun:red;width:300px;height:300px;"><div></span>

看到這個(gè)問(wèn)題，你會(huì)怎么解決呢，“旋轉(zhuǎn)”嘛，動(dòng)態(tài)的，當(dāng)然用javascript來(lái)解決啦,誠(chéng)然這樣可以解決問(wèn)題：在div中填寫(xiě)onmouseover=“round()”，然后編寫(xiě)script語(yǔ)句，實(shí)現(xiàn)操作-webkit-transform:rotate(值 deg)中的值嘛，setinterval重復(fù)調(diào)用改變值，然后讓它不斷轉(zhuǎn)圈嘛。

但是還有更簡(jiǎn)單些的么，你看這樣做的話，又要寫(xiě)script，又要加入新的指令，著實(shí)有些啰嗦，那還有什么更簡(jiǎn)單的辦法呢？

其實(shí)，的確還有一種更簡(jiǎn)單的辦法：css3，我們只需在設(shè)置樣式的時(shí)候，這樣做就可以了哦。

復(fù)制代碼

代碼如下:
<span style="font-size:12px;">.rotate{width: 300px;height: 300px;background-color: red;-webkit-transition:-webkit-transform 1s;}
.rotate:hover{-webkit-transform:rotate(360deg);}</span>

這里我們來(lái)看一下這段編碼的關(guān)鍵點(diǎn)在哪，transition，就是它，w3c中對(duì)它的說(shuō)明是“圓滑的用動(dòng)畫(huà)效果來(lái)改變CSS的屬性值”，看吧，還是來(lái)對(duì)比裝修前后的狀態(tài)，不過(guò)裝修前到裝修后每段時(shí)間的變化都展現(xiàn)了，仿佛一幀加一幀就湊成了影片一樣，這樣的對(duì)比更像是一個(gè)變化的演繹，也就成了動(dòng)態(tài)效果了，看吧，css未必然只能靜態(tài)展示，同樣可以動(dòng)起來(lái)的哦。

上一篇：字符串過(guò)長(zhǎng)CSS截取多余文字并用省略號(hào)顯示

下一篇：div css布局命名時(shí)盡量避免下劃線