Div的鼠标悬停css动画

July 31, 2019 · · 102次阅读

div放大动画

<div class="plus">放大动画</div>
.plus {
    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;
}
.plus:hover {
    transform: scale(1.05);/*1.05为放大的值*/
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
}          

div上下左右移动动画


<div class="move">上下左右移动动画</div>

.move {
    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;
}
.move:hover {
    transform: translate(10px, 10px);
    -webkit-transform: translate(10px, 10px);
    -moz-transform: translate(10px, 10px);
    -o-transform: translate(10px, 10px);
    -ms-transform: translate(10px, 10px);
}
translate前面的值为正,向右移动;后面的值为正,向下移动;
前后的值都为正值,向右下移动

标签:代码

添加新评论

CATEGORIES

控制面板