zoukankan      html  css  js  c++  java
  • CSS3 transition效果 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);
    }
  • 相关阅读:
    spring IOC
    spring IOC
    自定义UDF,UDTF函数
    vue异步 同步 等待方法执行完毕
    周总结(六)
    周总结(五)
    Downie Mac 网络视频下载工具 v3.9.1
    Sequel pro mysql 图形化工具下载
    让Mac系统读写NTFS Paragon
    framework-plugin 轻量级安卓组件化架构插件
  • 原文地址:https://www.cnblogs.com/naokr/p/6138490.html
Copyright © 2011-2022 走看看