纯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>

css3 图片 悬停效果的更多相关文章

  1. 基于CSS3图片悬停放大特效

    今天我们要来分享一款很酷的CSS3图片特效,这款图片特效可以利用鼠标滑过图片使其悬停放大,并使图片的周围出现发光的效果.配合黑色的背景,这款CSS3图片悬停放大效果显得更加立体大气,非常适合产品图片的 ...

  2. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  3. HTML+css3 图片放大效果

    <div class="enlarge"> <img src="xx" alt="图片"/> </div> ...

  4. css3图片过滤效果

    在线演示 本地下载

  5. CSS3图片悬停放大动画

    在线演示 本地下载

  6. iHover – 30+ 纯 CSS3 实现的超炫的图片悬停特效

    iHover 是一个令人印象深刻的图片悬停效果集合,完全基于 CSS3 实现,无依赖,能够搭配 Bootstrap 3 很好地工作.基于 SCSS 技术构建(包括文件),便于修改变量.有模块化的代码, ...

  7. css3图片模糊过滤效果

    css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下 ...

  8. 超厉害的CSS3图片破碎爆炸效果！

    var fx  = { buffer : function(obj, cur, target, fnDo, fnEnd, fs){ if(!fs)fs=6; var now={}; var x=0; ...

  9. iHover – 30+ 纯 CSS 实现的超炫的图片悬停特效

    iHover 是一个令人印象深刻的图片悬停效果集合,完全基于 CSS3 实现,无依赖,能够搭配 Bootstrap 3 很好地工作.基于 SCSS 技术构建,便于修改变量.有模块化的代码,无需包含整个 ...

随机推荐

  1. 手写Json转换

    在做项目的时候总是要手动将集合转换成json每次都很麻烦,于是就尝试着写了一个公用的方法,用于转换List to json: using System; using System.Collection ...

  2. MSS与MTU的关系

    MSS与MTU的关系 TU:maximum transmission unit,最大传输单元,由硬件规定,如以太网的MTU为1500字节. MSS:maximum segment size,最大分节大 ...

  3. draw call 理解和优化

    draw call是openGL的描绘次数(directX没怎么研究,但原理应该差不多)一个简单的openGL的绘图次序是:设置颜色→绘图方式→顶点座标→绘制→结束.每帧都会重复以上的步骤.这就是一次 ...

  4. 算法笔记_081:蓝桥杯练习 算法提高 矩阵乘法（Java）

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 有n个矩阵,大小分别为a0*a1, a1*a2, a2*a3, ..., a[n-1]*a[n],现要将它们依次相乘,只能使用结合率,求最 ...

  5. 【DB2】If 'db2' is not a typo you can run the following command to lookup the package that contains the binary: command-not-found db2 bash: db2: command not found

    数据库安装以后,db2报错如下: If 'db2' is not a typo you can run the following command to lookup the package that ...

  6. 08-spring学习-annotation配置

    利用annotation配置注入关系 为了更好的解释此类存在的意义,下面通过一段习惯性的开发进行问题的描述,例如: 现在有一个IAdminService服务层,这个服务层要调用的是IAdminDAO和 ...

  7. c++ builder xe2 debug正常 release崩溃 解决一例

    今天修改了以前一个项目的代码,是一个exe程序  C++ builder xe2 编译.以前都是好的.今天改了一下版本号 编译了一下,居然不能用了.直接崩溃 提示内存非法访问.而且显然还没有进入Win ...

  8. 升级macOS Sierra系统 导致错误 app: resource fork, Finder information, or similar detritus not allowed

    前几天刚升级了macOS Sierra系统,顿时感觉入坑了,本来好好的项目报如下错误: app: resource fork, Finder information, or similar detri ...

  9. C# JSON格式数据高级用法

     JSON简介 JSON(全称为JavaScript ObjectNotation) 是一种轻量级的数据交换格式.它是基于JavaScript语法标准的一个子集.JSON采用完全独立于语言的文本格式, ...

  10. Win10怎么打开或关闭自动维护功能