<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. 过滤3个字节以上的utf-8字符

    /** * 过滤掉超过3个字节的UTF8字符 * @param text * @return * @throws UnsupportedEncodingException */ public stat ...

  2. df和du显示的磁盘空间使用情况不一致的原因及处理

    在Linux下查看磁盘空间使用情况,最常使用的就是du和df了.然而两者还是有很大区别的,有时候其输出结果甚至非常悬殊. 1. 如何记忆这两个命令 du-Disk Usage df-Disk Free ...

  3. 服务器安装MongoDB

    1.下载MongoDB安装包,如:mongodb-win32-i386-1.8.1.zip: 2.新建目录“D:\MongoDB”,将安装中的bin目录下全部.exe文件复制到“D:\MongoDB” ...

  4. Mysql 学习笔记 20140219

    1. Mysql常用命令:每个命令以分号结束. create database name;          创建数据库 use databasename;              选择数据库 dr ...

  5. 安装Weblogic11g

    1.下载weblogic11g http://www.oracle.com/technetwork/middleware/weblogic/downloads/wls-for-dev-1703574. ...

  6. Spring配置事务 http://www.cnblogs.com/leiOOlei/p/3725911.html

    http://www.cnblogs.com/leiOOlei/p/3725911.html JNDI方式配置数据源: <?xml version="1.0" encodin ...

  7. NoSuchMethodError: resolveTypeArguments

    NoSuchMethodError: resolveTypeArguments——因为spring版本冲突导致,观察解压war包后lib中有几个spring.在pom中通过exclusion解决 Ht ...

  8. cocos2d-lua 3.5 android搭建常见错误

    新建一个项目,就不说了,就是用命令行 cocos new HelloLua -p com.wwj.hellolua -l lua -d ~/Cocos2dxProj ,生成下 然后把项目导入eclip ...

  9. 医失眠灵验方--五味子50g 茯神50g 合欢花15g 法半夏15g

    方药:五味子50g  茯神50g  合欢花15g  法半夏15g  水煎服    主治:失眠健忘    此方为已故名老中医李培生之验方,用于临床治疗失眠健忘症,疗效显著,其主药为五味子,滋阴和阳,敛阳 ...

  10. android softinput 相关

    getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN | WindowManager.Layo ...