纯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. jsp el 自定义方法 tld 说明

    使用 el 的过程中,需要使用到后端代码处理逻辑,这个时候我们就需要自定义 方法. 如我们后端代码定义如下: package com.rhythmk.common; public class FncH ...

  2. Groovy(java)+Spock+IDEA+maven+Jenkins+SVN+maven-surefire-plugin+maven-surefire-report-plugin/maven-antrun-extended-plugin集成接口测试框架

    文章为原创,未经本人授权禁止转载. 一.spock框架环境搭建. 二.基于spock框架的脚本开发. 三.基于spock框架的用例执行并生成HTML报告. 四.集成jenkins生成HTML报告. 五 ...

  3. C#秘密武器之特性

    一.概述 Attribute说白了就是一个类而已,里边一般含有一些附加信息,或者一些特殊的处理逻辑,以便告诉编译器应用该特性的东东是个奇葩,需要特殊对待! 二.使用时的注意事项 2.1. Attrib ...

  4. 使用jsmin压缩javascript脚本

    官方地址:http://www.crockford.com/javascript/jsmin.html 点击页下方的”zip file containing an MS-DOS.exe file“下载 ...

  5. Annotation:系统内建Annotation

    1,掌握系统内建的三个Annotation. Annotation被称为元数据特效,也被称为注释,即:使用注释方式,加入一些程序信息. Java.lang.annotation接口是所有Annotai ...

  6. 可拖拽的3D盒子

    代码地址如下:http://www.demodashi.com/demo/11453.html   一直想做一个立体的盒子,前段时间刚好看见掘金上有位朋友发了篇关于3d盒子的文章,看了决定自己做一下, ...

  7. sphinx设置多属性过滤的方法(setFilter)

    需求描述 mysql中,每一个文档都有多个标签,查询时可以筛选一个标签也可以筛选同时拥有多个标签的文档. 数据示例 文档 标签   1    1,2,3,4,5   2    2,3,4,5,6   ...

  8. php创建对象。真！变！态！

    PHP创建类的方式,真是够变态,以下是创建方式: 假设类: class SomeClass {//....} 创建对象: 1.直接通过类名实例化 $obj1 = new SomeClass(); 这种 ...

  9. 从构建分布式秒杀系统聊聊验证码 给大家推荐8个SpringBoot精选项目

    前言 为了拦截大部分请求,秒杀案例前端引入了验证码.淘宝上很多人吐槽,等输入完秒杀活动结束了,对,结束了...... 当然了,验证码的真正作用是,有效拦截刷单操作,让羊毛党空手而归. 验证码 那么到底 ...

  10. 将Cmder添加到系统右键菜单中

    1.把 Cmder 加到环境变量 把Cmder.exe存放的目录添加到系统环境变量: 加完之后,Win+r一下输入cmder,即可. 2.添加 cmder 到右键菜单:环境变量添加后,在任意文件夹中即 ...