CSS3实现⿏标hover的过渡效果
我想让⿏标放在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;js控制css3动画触发
/*善解⼈意的分割线*/
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逼的效果......

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。