zoukankan      html  css  js  c++  java
  • CSS3在hover下的几种效果

    CSS3在hover下的几种效果代码分享,CSS3在鼠标经过时的几种效果集锦

    效果一: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);
    }

    qq:527592435
  • 相关阅读:
    一个在线的C++帮助文档网站
    linux 学习笔记 (四)
    类的static成员函数和const成员函数
    Linux的inode、软链接、硬链接
    常用linux命令(三)
    多语言调用之 C++ 调用 Java JNI
    多语言调用之 Java调用C/C++
    NHibernate 操作原生SQL以及查询DataTable,DataSet
    DataGridView控件用法合集
    Java AOP实战 寻找SQL的引用路径
  • 原文地址:https://www.cnblogs.com/cplvfx/p/6480178.html
Copyright © 2011-2022 走看看