我想让鼠标放在div上就让它旋转变大,离开div后它又恢复本来的样子。
于是我就想写一个JS,监听一个hover事件,当hover发生的时候,触发一个计时器,在计时器里写两个值,一个管角度,一个管宽度,随着时间的变化逐渐增加,不断地重写div的style。当达到我期望的limit的值后让它停止(或者干脆解除计时器)。
再监听一个leave事件,当leave发生后,让一切以它原来的style为limit的方向变化。(所以一开始就要get到这个div最初的style并且保存好)
然而事实上这个用CSS3也能实现吖!
给个容器加个class就好了
<div class="guodu">css3过渡</div>
剩下的全部交给CSS3
.guodu{ width:100px; height:50px; margin:0px auto; margin-top:50px; background:#6C6; opacity:0.6; border:1px solid #fff; border-radius:15px; color:#fff; text-align:center; line-height:50px; font-size:16px; /*善解人意的分割线*/ transition:width 2s, height 2s, background 2s, transform 2s; -moz-transition:width 2s, height 2s, background 2s, -moz-transform 2s; -webkit-transition:width 2s, height 2s, background 2s, -webkit-transform 2s; -o-transition:width 2s, height 2s, line-height 2s, background 2s, -o-transform 2s; }
在transition里规定好想要变化的属性以及期望经过多少时间能达到最大的效果,时间越长就会越慢咯。
不过如果我要修改时间的话要一个一个改真的很烦,这只是一个test而已,要是一个大工程,改起来肯定会是各种酸爽。
直到我知道了一个东西叫css preprocessor,CSS预处理器,有一种预处理器叫做scss/sass,
这个东西可以对css进行编程,我们可以写一个变量专门存储时间,然后写在css中就好啦,如果想改时间,改变量就好啦!
写好以后是这个样子
$speed : 1s; .guodu{ width:100px; height:50px; margin:0px auto; margin-top:50px; background:#6C6; opacity:0.6; border:1px solid #fff; border-radius:15px; color:#fff; text-align:center; line-height:50px; font-size:16px; /*善解人意的分割线*/ transition:width $speed, height $speed, background $speed, transform $speed; -moz-transition:width $speed, height $speed, background $speed, -moz-transform $speed; -webkit-transition:width $speed, height $speed, background $speed, -webkit-transform $speed; -o-transition:width $speed, height $speed, line-height $speed, background $speed, -o-transform $speed; }
然而要让sass生效,我们还得安装Ruby的环境......我最讨厌装环境了,所以我放弃了。
还一个很烦人的事情是不仅transition要写多个浏览器版本,transform也要写多个浏览器的版本。这个也是硬伤,没有办法......
讲真,这件事情还没完,我们目前只是把期望看到变化的属性和时间设定好了,具体期望变化到的目标的limit值还是要在hover伪类上来设置
.guodu:hover{ width:200px; height:60px; background:#39F; line-height:60px; cursor:pointer; /*善解人意的分割线*/ transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); }
然后就没有然后了......
依旧是一个很low逼的效果......