其实很简单,我们只需要提前写好变化前的div,和变化后的div,在js中控制class类名的改变来实现动画就可以了。
//html部分:
.div1 {
width:22px;
height:22px;
transition: 0.4s;
}
.div2 {
width:200px;
height:130px;
transition: 0.3s;
}
.div3 {
width:76px;
height:76px;
transition: 1s;
}
.newdiv1 {
transform: translatex(12px);
transition: 0.3s;
width:200px;
height:130px;
}
.newdiv2 {
transform: rotate(360deg);
transition: 1s;
width:76px;
height:76px;
}
.newdiv3 {
transform: scale(1,1);
transition: 0.4s;
width:22px;
height:22px;
}
//上面我们预设了三个css3动画效果
//js部分:
div1.onmouseenter = function(){
div1.className = "newdiv1"; //此处要注意根据自己代码的实际情况来选中元素
}
div2.onmouseenter = function(){
div2.className = "newdiv2";
}
div3.onmouseenter = function(){
div3.className = "newdiv3";
}
div1.onmouseleave = function(){
div1.className = "div1"; //要恢复原样只要将class类名改成原来的就可以了
}
div2.onmouseleave = function(){
div2.className = "div2";
}
div3.onmouseleave = function(){
div3.className = "div3";
}