CSS3 动画，鼠标移上去，div 旋转、放大、缩小、移动

background-color: #f7d2f7;

float: left;

font-size: 12px;

text-align: center;

color: #000;

}

/效果一：360°旋转 修改rotate(旋转度数)/

.img1 {

transition: All 0.4s ease-in-out;

-webkit-transition: All 0.4s ease-in-out;

-moz-transition: All 0.4s ease-in-out;

-o-transition: All 0.4s ease-in-out;

}

.img1:hover {

transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

-o-transform: rotate(360deg);

-ms-transform: rotate(360deg);

}

/效果二：放大 修改scale(放大缩小的值)/

.img2 {

transition: All 0.4s ease-in-out;

-webkit-transition: All 0.4s ease-in-out;

-moz-transition: All 0.4s ease-in-out;

-o-transition: All 0.4s ease-in-out;

}

.img2:hover {

transform: scale(1.2);

-webkit-transform: scale(1.2);

-moz-transform: scale(1.2);

-o-transform: scale(1.2);

-ms-transform: scale(1.2);

}

/效果三：旋转放大 修改rotate(旋转度数) scale(放大值)/

.img3 {

transition: All 0.4s ease-in-out;

-webkit-transition: All 0.4s ease-in-out;

-moz-transition: All 0.4s ease-in-out;

-o-transition: All 0.4s ease-in-out;

}

.img3:hover {

transform: rotate(360deg) scale(1.2);

-webkit-transform: rotate(360deg) scale(1.2);

-moz-transform: rotate(360deg) scale(1.2);

-o-transform: rotate(360deg) scale(1.2);

-ms-transform: rotate(360deg) scale(1.2);

}

/效果四：上下左右移动 修改translate(x轴,y轴)/

.img4 {

transition: All 0.4s ease-in-out;

-webkit-transition: All 0.4s ease-in-out;

-moz-transition: All 0.4s ease-in-out;

-o-transition: All 0.4s ease-in-out;

}

.img4:hover {

transform: translate(0, -10px);

-webkit-transform: translate(0, -10px);

-moz-transform: translate(0, -10px);

-o-transform: translate(0, -10px);

-ms-transform: translate(0, -10px);

}

360°旋转

放大

旋转放大

上下左右移动

录入金额

{{data.insertSum}}

万

录入笔数

{{data.insertNum}}

笔

登录次数

{{data.loginNum}}

次

登录时间：

{{data.lastTime}}

当前时间：

{{timestr}}

{{userName}} 您好，欢迎登录温州民间借贷备案管理系统