纯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. Lidgren Network Library

    Lidgren Network Library Classes   Class Description NetAESEncryption AES encryption NetBitVector Fix ...

  2. java实现快速排序算法

    1.算法概念. 快速排序(Quicksort)是对冒泡排序的一种改进.由C. A. R. Hoare在1962年提出.2.算法思想. 通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据 ...

  3. java中调用kettle转换文件

    java中调用kettle转换文件 通过命令行也能够调用,然后java中调用命令行代码也能够.这样没有和java代码逻辑无缝集成.本文说明kettle5.1中假设通过其它API和java代码无缝集成: ...

  4. PhoneGap录像 以及 录音功能 简单代码实现3

    1,录音功能 navigator.device.capture.captureAudio( function(files){//成功回调函数 Ext.getCmp("video_files_ ...

  5. Simple Factory (简单工厂模式)

    简单工厂模式不是23种设计模式之一,简单工厂模式属于创建型模式, 又叫做静态工厂方法(Static Factory Method) 简单工厂模式是工厂模式家族中最简单实用的模式,可以理解为是不同工厂模 ...

  6. vi语法高亮，自动缩进（转）

    编辑.vimrc 这样文件在其中加入如下两行就可以了,此法对#号提示符下的操作无效. let &termencoding=&encodingset fileencodings=utf- ...

  7. 详细解说 STL 排序(Sort)（转）

    作者Winter 详细解说 STL 排序(Sort) 0 前言: STL,为什么你必须掌握 1 STL提供的Sort 算法 1.1 所有sort算法介绍 1.2 sort 中的比较函数 1.3 sor ...

  8. MAC OS X 10.8 操作远程SSH服务器 ＋ 无密码输入使用SSH服务器

    怀揣着为中小企业量身定做一整套开源软件解决方案的梦想开始了一个网站的搭建.http://www.osssme.org/ 使用命令行连接连接远程SSH服务器,root为我使用的远程服务器用户名,@后为I ...

  9. Could not create and/or set value back on to object .

    严重: Error building beanorg.springframework.beans.factory.UnsatisfiedDependencyException: Error creat ...

  10. easyui tree自定义属性用法

    easyui为树显示提供了以下属性, id:节点id,这个很重要到加载远程服务器数据 which is important to load remote data text: 显示的节点文本 stat ...