• 分享4种CSS3效果(360度旋转、旋转放大、放大、移动)


    转自:http://www.j                     q-school.com/Show.aspx?id=281

    本文仅供自己学习而转载,由于效果掩饰地址的转载出现问题,强烈建议去源网站查看示例!    上面为源网站网址,中间大段的空格去掉。

    效果一:360°旋转 修改rotate(旋转度数)     效果演示地址

    01	* {
    02	    transition:All 0.4s ease-in-out;
    03	    -webkit-transition:All 0.4s ease-in-out;
    04	    -moz-transition:All 0.4s ease-in-out;
    05	    -o-transition:All 0.4s ease-in-out;
    06	}
    07	*:hover {
    08	    transform:rotate(360deg);
    09	    -webkit-transform:rotate(360deg);
    10	    -moz-transform:rotate(360deg);
    11	    -o-transform:rotate(360deg);
    12	    -ms-transform:rotate(360deg);
    13	}
    

      

    效果二:放大 修改scale(放大的值)     效果演示地址

    01	* {
    02	    transition:All 0.4s ease-in-out;
    03	    -webkit-transition:All 0.4s ease-in-out;
    04	    -moz-transition:All 0.4s ease-in-out;
    05	    -o-transition:All 0.4s ease-in-out;
    06	}
    07	*:hover {
    08	    transform:scale(1.2);
    09	    -webkit-transform:scale(1.2);
    10	    -moz-transform:scale(1.2);
    11	    -o-transform:scale(1.2);
    12	    -ms-transform:scale(1.2);
    13	}
    

      

    效果三:旋转放大 修改rotate(旋转度数) scale(放大值)     效果演示地址

    01	* {
    02	    transition:All 0.4s ease-in-out;
    03	    -webkit-transition:All 0.4s ease-in-out;
    04	    -moz-transition:All 0.4s ease-in-out;
    05	    -o-transition:All 0.4s ease-in-out;
    06	}
    07	*:hover {
    08	    transform:rotate(360deg) scale(1.2);
    09	    -webkit-transform:rotate(360deg) scale(1.2);
    10	    -moz-transform:rotate(360deg) scale(1.2);
    11	    -o-transform:rotate(360deg) scale(1.2);
    12	    -ms-transform:rotate(360deg) scale(1.2);
    13	}
    

      

    效果四:上下左右移动 修改translate(x轴,y轴)     效果演示地址

    01	* {
    02	    transition:All 0.4s ease-in-out;
    03	    -webkit-transition:All 0.4s ease-in-out;
    04	    -moz-transition:All 0.4s ease-in-out;
    05	    -o-transition:All 0.4s ease-in-out;
    06	}
    07	*:hover {
    08	    transform:translate(0,-10px);
    09	    -webkit-transform:translate(0,-10px);
    10	    -moz-transform:translate(0,-10px);
    11	    -o-transform:translate(0,-10px);
    12	    -ms-transform:translate(0,-10px);
    13	}
    

      


    Demo打包下载 

  • 相关阅读:
    软件开发基本原则(四)—— 风险管理 (转)
    软件开发基本原则(三)—— 基本原则 (转)
    人心散了,项目必然要败! (转)
    项目失败的若干征兆
    项目管理思考——角色转变
    软件开发基本原则(二)—— 典型错误 (转)
    项目管理思考——我适合做项目经理吗
    flex 学习篇 导航类容器
    mfc 中在 dc中 显示 位图
    第一次作业 黎娜 2013551605
  • 原文地址:https://www.cnblogs.com/mengfff/p/4933391.html
Copyright © 2020-2023  润新知