zoukankan      html  css  js  c++  java
  • css3 图片 悬停效果

    纯css实现 

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <style>
            *
            {
                padding:0px; margin:0
            }
            ul
            {
                -webkit-perspective:1200; /*定义perspective 子级元素才会有3D效果*/width:800px; margin:0 auto;  
            } 
            li
            {
                width: 225px;
                height: 210px; display:block;
               list-style:none; padding:0px; margin:0;
            }
            div
            {
                width:225px; height:210px; margin:0 auto; position:absolute; top:1px;
                background:url(Images/tout-shadow1.png) no-repeat;  /*背景*/
                -webkit-transform-origin:0 0;
                -webkit-transform:scaleY(0.95); /*放大缩小*/
                -webkit-transition:-webkit-transform .4s ease;
            }
            img
            {
            width:225px; height:210px; 
            position:absolute; top:0px;
            display:block;
            -webkit-transform-origin-x:0px;
                -webkit-transform-origin-y:0px;
                -webkit-transform-origin-z:0px;
            -webkit-transition:-webkit-transform .3s ease;
            -webkit-transform-style:preserve-3d;
            }
            li:hover
            {
                -webkit-background-size:225px 220px;
            }
            li:hover img
            {
                -webkit-transform:rotateX(10deg); 
            }
            li:hover div
            {
                -webkit-transform:scaleY(1.02);
            }
        </style>
    </head>
    <body>
        <ul>
            <li>
         <div></div>
        <img src="Images/tout-secrets.png" /></li>
        </ul>
        
    </body>
    </html>
  • 相关阅读:
    BWList of logged on users in the Portal
    BASIS About Profile
    B/S C/S 打印
    程序员得学习观各种好书推荐
    ORACLE面试测试题目
    oracle经典20题(参考答案)
    程序员得学习观各种好书推荐
    Oracle笔试题
    Oracle笔试题
    Oracle里面常用的数据字典有哪些?
  • 原文地址:https://www.cnblogs.com/aimyfly/p/3195357.html
Copyright © 2011-2022 走看看