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>

相关阅读:
软件测试的术语及解释总结
测试工具
数据库客户端连接
应用程序发生错误怎么修改
软件测试容易忽略的缺陷
LR中错误解决方法
LR结果分析2
LR结果分析
Hive
zookeeper

原文地址：https://www.cnblogs.com/aimyfly/p/3195357.html

css3 图片 悬停效果

css3 图片悬停效果