仅用CSS让你的div控制模块转动

日期:2021-01-20 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

html語言撰写,div或table合理布局,css设定款式,javascript设定回应,互动,这便是我最开始印象中网页页面最基本最初始的存在,因而在这里就给css定了性,设定款式:款式嘛,就仿佛是室内装修的实际效果,仅有最开始的初始情况和室内装修后的情况,全是静态数据的,哪怕存在1个hover,也但是是比照以前以后的情况罢了,却不曾想,今日碰到的这个处理方法让我又深深的震动了1把。

难题:怎样让你的1个div控制模块转动?

拷贝编码
编码以下:

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

看到这个难题,你会如何处理呢,“转动”嘛,动态性的,自然用javascript来处理啦,诚然这样能够处理难题:在div中填写onmouseover=“round()”,随后撰写script句子,完成实际操作-webkit-transform:rotate(值 deg)中的值嘛,setinterval反复启用更改值,随后让它持续转圈嘛。

可是也有更简易些的么,你看这样做的话,又要写script,又要添加新的命令,着实一些唠叨,那也有甚么更简易的方法呢?

实际上,确实也有1种更简易的方法:css3,大家只需在设定款式的情况下,这样做便可以了哦。

拷贝编码
编码以下:

<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>

这里大家看来1下这段编号的重要点在哪儿,transition,便是它,w3c中对它的表明是“圆润的用动漫实际效果来更改CSS的特性值”,看吧,還是来比照室内装修前后左右的情况,但是室内装修前到室内装修后每段時间的转变都呈现了,好像1帧加1帧就凑变成影片1样,这样的比照更好像1个转变的演绎,也就变成动态性实际效果了,看吧,css不一定然只能静态数据展现,一样能够动起来的哦。