CSS3(360度旋转、旋转放大、放大、移动)效果制作


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

* { 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;
}
*:hover {
    transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
}

效果二:放大 修改scale(放大的值)

* {
    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;
}
*: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(放大值)

* {
    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;
}
*: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轴)

* {
    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;
}
*: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);
}

声明:Shire | 一路走一路记|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - CSS3(360度旋转、旋转放大、放大、移动)效果制作


Carpe Diem and Do what I like