zoukankan      html  css  js  c++  java
  • css3鼠标经过的一些简单的效果

    1.鼠标悬停图片变大

    :hover {

      -webkit-transform: scale(1.1);

      -moz-transform: scale(1.1);

      -o-transform: scale(1.1);

      -ms-transform: scale(1.1);

    }

    缓慢变化需要在包住图片的外层加上:-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s;

    变大不超出的话就加上overflow:hidden;

    2.鼠标悬停整体旋转

    :hover {

      transform:rotate(360deg);

      -webkit-transform:rotate(360deg);

      -moz-transform:rotate(360deg);

      -o-transform:rotate(360deg);

       -ms-transform:rotate(360deg);

    }

    缓慢变化需要在包住图片的外层加上: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;

    3.鼠标悬停整体旋转放大

    :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);

    }

    缓慢变化需要在包住图片的外层加上: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;

    4.鼠标悬停整体上升

    :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);

    }

    缓慢变化需要在包住图片的外层加上: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里面):box-shadow:0px 5px 20px #ccc;

  • 相关阅读:
    酒里放茶,醉,未遂。
    利用自定义事件实现不同窗体间的通讯 Delphi篇
    主题:CS0016: 未能写入输出文件“c:\WINDOWS\Microsoft.NET\***.dll”错误处理
    delphi點擊窗體最小化,關閉按鈕時的托盤圖標設置
    delphi制作程序啟動歡迎窗體
    那年 那雪
    DOL魔盘解决方案
    专家解密“艳照门”背后三大安全陷阱
    jQuery获取Select选择的Text和 Value(转)
    技术列传 guava cache
  • 原文地址:https://www.cnblogs.com/wpTing/p/8080835.html
Copyright © 2011-2022 走看看