<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题</title>

<style>

.demo1{

    width:200px;

    height:200px;

    border:1px solid blue;

    display: block;

    padding:5px;

}

img{

    -webkit-transition-duration: 0.5s;

    -moz-transition-duration: 0.5s;

    -o-transition-duration: 0.5s;

    }

a:hover img{

-webkit-transform:scale(0.8);

-webkit-box-shadow:0px 0px 30px #ccc;

-moz-transform:scale(0.8);

-moz-box-shadow:0px 0px 30px #ccc;

-o-transform:scale(0.8);

-o-box-shadow:0px 0px 30px #ccc;

}

</style>

</head>

<body>

<a href="#" class="demo1">

    <img src="1.jpg" width=200 height=200 alt="">

</a>

</body>

</html>

CSS3 图片悬浮缩放效果的更多相关文章

  1. CSS3图片轮播效果

    原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...

  2. css3图片模糊过滤效果

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

  3. iOS transform解决连续多次旋转缩放，实现图片旋转缩放效果

    一.需求 实现imageView的缩放旋转效果,一般有两种方式: 1.底层加scrollview,利用scrollview的属性实现.(推荐这种,这是我比较后发现的,手势做缩放旋转会有点弊端) 2.利 ...

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

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

  5. css3图片3D翻转效果

    点击图片看翻转效果 html结构 <div class="flip"> <div class="front"> <img src= ...

  6. CSS3图片折角效果

    本篇文章由:http://xinpure.com/css3-picture-angle-effect/ 图片折角效果主要是通过设置 border 属性实现的效果 效果预览 效果解析 假设我们将一个元素 ...

  7. Android图片的缩放效果

    一.概述 Android 图片要实现:手势滑动,双击变大,多点触控的效果. 其实是有一定难度的,我们需要用Matrix ,GestureDetector 等等需要完成一个复杂的逻辑才能实现,然而今天我 ...

  8. css3 鼠标悬浮动画效果

    CSS3案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  9. c#,利用WPF的ScaleTransform和TranslateTransform实现图片的缩放效果

    一.缩放要求 1.缩放对象在可视区域内,已对象的中心点进行缩放. 2.缩放对象比可视区大,并且对象各边界都在可视区外围,那么已鼠标位置进行缩放. 3.缩放对象比可视区大,但是缩放后某一边界在可视区的对 ...

随机推荐

  1. Notepad++隐藏的用法

    Notepad++是一个非常强大的文本编辑器. 它里面有很多有用的插件. 我认为对我比较有帮助的一个是NppExporter.它可以将Notepad++中彩色的代码原样的复制到Word中. 想要获得彩 ...

  2. json字符串转json对象的方法

    在使用$.ajax()方法时,我们可以设置dataType:'json'的参数,便可以拿到后台返回的json数据对应的json对象.但有时,我们拿到的是json字符串,需要将它再转成json对象来使用 ...

  3. ruby迭代器枚举器

    迭代器一个迭代器是一个方法,这个方法里面有yield语句,使用了yield的方法叫做迭代器,迭代器并非一定要迭代,与传递给这个方法的块进行数据传输 yield将数据传给代码快,代码块再把数据传输给yi ...

  4. 第3章 System V IPC

    3.1 概述 System V IPC 包含:System V消息队列.System V信号量.System V共享内存. 3.2 key_t 键和 ftok函数 这三种类型的System V IPC ...

  5. [ActionScript 3.0] 自定义顶级类

    为了结合FlashBuilder编译参数,达到发布项目时不编译trace代码方便,写一个顶级类: package { public function tracing(...args):void { C ...

  6. [Java] java中的异常处理

    Java中的异常类都继承自Throwable类.一个Throwable类的对象都可以抛出(throw). Throwable对象可以分为两组.一组是unchecked异常,异常处理机制往往不用于这组异 ...

  7. jQuery：find()及children()的区别

    1:children及find方法都用是用来获得element的子elements的,两者都不会返回 text node,就像大多数的jQuery方法一样. 2:children方法获得的仅仅是元素一 ...

  8. NYOJ 52-无聊的小明

    点击打开链接 无聊的小明 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述       这天小明十分无聊,没有事做,但不甘于无聊的小明聪明的想到一个解决无聊的办法,因为他突 ...

  9. 打印从1到最大的n位数

    //和剑指offer程序基本一致,不过print和进位两部分合并在一个程序中 //如果把其分拆,进行适当的整理,代码会更加整洁 void PrintToMaxOfDigitsN(int n) { ) ...

  10. ubuntu 服务管理

    在Linux系统下,一个Services的启动.停止以及重启通常是通过/etc/init.d目录下的脚本来控制的.然而,在启动或改变运行级别时,是在/etc/rcX.d中来搜索脚本.其中X是运行级别的 ...