纯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. RocketMQ 拉取消息-通信模块

    首先看server端:class NettyRemotingServer extends NettyRemotingAbstract implements RemotingServer 下面这个实现了 ...

  2. Microsoft.Office.Workflow.Actions Namespace

    Microsoft.Office.Workflow.Actions Namespace SharePoint 2010   Contains the workflow activities that ...

  3. atitit.提升开发效率---使用server控件生命周期 asp.net 11个阶段 java jsf 的6个阶段比較

    atitit.提升开发效率---使用server控件生命周期  asp.net 11个阶段  java jsf 的6个阶段比較 例如以下列举了server控件生命周期所要经历的11个阶段. (1)初始 ...

  4. Java中equals()、equalsIgnoreCase（)和==的区别

    用久了C#,在Java中,判断一个字符串还是习惯性的用了==,但是总是不能按照正确的判断分支运行,后来才想起来Java中是有equals的,然后就有引出了equalsIgnoreCase.   这三种 ...

  5. BitConverter.GetBytes(int)和BitConverter.ToString 方法 (Byte[])

    BitConverter.ToString 方法 (Byte[]) 网址:https://msdn.microsoft.com/zh-cn/library/3a733s97(v=vs.110).asp ...

  6. 算法笔记_085:蓝桥杯练习 9-3摩尔斯电码（Java）

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 摩尔斯电码破译.类似于乔林教材第213页的例6.5,要求输入摩尔斯码,返回英文.请不要使用"zylib.h",只能使用 ...

  7. 常见Style 对象属性值

    Style对象的主要需要关注的属性分为4类,下面分别介绍下: Background 属性 backgroundColor 属性设置元素的背景颜色 Object.style.backgroundColo ...

  8. webDriver API——第10部分Chrome WebDriver

    class selenium.webdriver.chrome.webdriver.WebDriver(executable_path='chromedriver', port=0, chrome_o ...

  9. [Exception Spring 1] - Attribute value must not be null

    java.lang.IllegalArgumentException: Attribute value must not be null at org.springframework.util.Ass ...

  10. Linux REMOTE HOST IDENTIFICATION HAS CHANGED错误解决方法

    http://linuxme.blog.51cto.com/1850814/375752       WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED解决 ...