• 分享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打包下载 

  • 相关阅读:
    前端-【学习心得】-node使用杂谈
    前端-【学习心得】-自己定义一个触摸函数
    前端-【学习心得】-模板渲染的简单方法
    [iOS]NSArray求最大值最小值平均值和的快速方法
    ARC与MRC的混用
    [转]让Xcode的控制台支持LLDB类型的打印
    [iOS]将图片保存到本地相册
    [iOS]深度遍历view的subview
    [转]NSAssert的使用
    [封装]iOS获取设备唯一标识
  • 原文地址:https://www.cnblogs.com/mengfff/p/4933391.html
Copyright © 2020-2023  润新知