<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. Java多线程之银行出纳员仿真

    package concurrent; import java.util.LinkedList; import java.util.PriorityQueue; import java.util.Qu ...

  2. Rstudio匹配中文

    之前在操作csv文件时一般是将中文字符在excel或用Perl将其中的中文转换成对应的英文,但是最近碰到不得不在R里面进行中文符操作,发现R里面的匹配是无法识别的中文符的.比如: df <- r ...

  3. JSON.stringify()的使用--将string转换成json

    ===========================================================1. ====JSON.stringify()================== ...

  4. [ActionScript 3.0] AS3 时间日期格式化DateTimeFormatter类的运用

    import flash.globalization.DateTimeFormatter; var _timeFormatter:DateTimeFormatter; var _dateFormatt ...

  5. [ActionScript] AS3利用SWFObject与JS通信

    首先介绍SWFObject的用法: swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flash ...

  6. Ext 项目随笔

    region: This region's layout position (north, south, east, west or center). Read-only. collapsible:t ...

  7. oracle参数open_cursors和session_cached_cursor详解！

    SQL> show parameter open_cursors           --每个session(会话)最多能同时打开多少个cursor(游标) NAME               ...

  8. archlinux log 文件查看

    # pacman -S gnome-system-log gnome-logsextra/gnome-logs 3.12.1-1 (gnome-extra) A log viewer for the ...

  9. JAVA设计模式之调停者模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述调停者(Mediator)模式的: 调停者模式是对象的行为模式.调停者模式包装了一系列对象相互作用的方式,使得这些对象不必相互明显引用.从 ...

  10. Oracle中MD5+Base64加密实现

    JAVA实现: public static String getMD5(String str) throws Exception {   MessageDigest md5 = MessageDige ...