纯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. 电子商务ICP经营许可证申请条件

    电子商务ICP经营许可证申请条件:注册资金100万的纯内资公司:服务器在本地:域名备案以公司名义备案:申请条件:1.公司营业执照副本复印件需清晰有效,并已完成该年度年检事宜,特别注意营业执照的有效期要 ...

  2. iOS7重磅推新--不断尝试与重新设计的过程

    来源:GBin1.com iOS7重磅推新--不断尝试与重新设计的过程 或许你心里已经有了关于iPhone最新操作系统的评价,可能你喜欢它,也可能不喜欢,事实上大多数设计者不喜欢.设计界似乎一致认为I ...

  3. 拓扑排序的实现_TopoSort

    拓扑排序是求一个AOV网(顶点代表活动, 各条边表示活动之间的率先关系的有向图)中各活动的一个拓扑序列的运算, 可用于測试AOV 网络的可行性. 整个算法包含三步: 1.计算每一个顶点的入度, 存入I ...

  4. JRE与JVM、JDK的区别

    JRE与JVM.JDK的区别 一. 详细介绍1.JVM -- java virtual machine JVM就是我们常说的java虚拟机,它是整个java实现跨平台的 最核心的部分,所有的java程 ...

  5. Angular 监听路由变化事件

    摘要: $stateChangeStart- 当模板开始解析之前触发 $rootScope.$on('$stateChangeStart', function(event, toState, toPa ...

  6. Unity3d 录像

    flashtd1: 回复 tqfa :我觉得是有方法可以实现的,之前使用高通的增强显示开发包时发现其实它是添加了一个类似movietexture的东西,叠加在它的摄像机上 如果文档里有操作moviet ...

  7. 每秒处理3百万请求的Web集群搭建-如何生成每秒百万级别的 HTTP 请求？

    本文是构建能够每秒处理 3 百万请求的高性能 Web 集群系列文章的第一篇.它记录了我使用负载生成器工具的一些经历,希望它能帮助每一个像我一样不得不使用这些工具的人节省时间. 负载生成器是一些生成用于 ...

  8. Python: 去掉字符串中的非数字(或非字母)字符

    >>> crazystring = ‘dade142.;!0142f[.,]ad’ 只保留数字>>> filter(str.isdigit, crazystring ...

  9. 解决在开发环境中访问json配置文件时报HTTP 错误 404.3 - Not Found

    问题描述: 在做demo时,使用json文件做配置文件,访问时,http状态提示:404.3错误,经验证json确认存在,路径也没有问题, 在浏览器地址栏里直接访问json时也提示同样的错误, 根据错 ...

  10. 如何优雅的使用RabbitMQ(转载)

    RabbitMQ无疑是目前最流行的消息队列之一,对各种语言环境的支持也很丰富,作为一个.NET developer有必要学习和了解这一工具.消息队列的使用场景大概有3种: 1.系统集成,分布式系统的设 ...