<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. centos下的一些命令

    1.查看版本 cat /etc/redhat-release 2.安装VIM yum -y install vim-enhanced 3.升级系统 yum -y update 4.把 vi 替换为 v ...

  2. Python中作Q-Q图（quantile-quantile Plot）

    Q-Q图主要可以用来回答这些问题: 两组数据是否来自同一分布 PS:当然也可以用KS检验,利用python中scipy.stats.ks_2samp函数可以获得差值KS statistic和P值从而实 ...

  3. bootstrap小例子等

    一个简单的表单样式: <div class="row"> <form action="#" class="form-horizont ...

  4. Intellij IDEA 使用Spring-boot-devTools无效解决办法

    相信大部分使用Intellij的同学都会遇到这个问题,即使项目使用了spring-boot-devtools,修改了类或者html.js等,idea还是不会自动重启,非要手动去make一下或者重启, ...

  5. java中的final总结

    Java关键字final有最终的,不可改变的含义,它可以修饰非抽象类.非抽象类成员方法和变量. 报错:类"TestFinal"要么是abstract,要么是final的,不能两个都 ...

  6. mybatis模板

    因为这里是说mybatis的,所以呢 servlet就不做多说了,代码也不在这里贴出来了. log4j.properties log4j.rootLogger=DEBUG,Console log4j. ...

  7. 基于nginx和uWSGI在Ubuntu上部署Djan

    http://www.jianshu.com/p/e6ff4a28ab5a 文/Gevin(简书作者)原文链接:http://www.jianshu.com/p/e6ff4a28ab5a著作权归作者所 ...

  8. ecmall程序结构图与常用数据库表

    ecm_acategory:存放的是商城的文章分类.ecm_address:存放的是店长的地址ecm_article:存放的是商城的相关文章ecm_brand:存放的是商城的品牌分类(注意与表ecm_ ...

  9. CodeForces 604D 【离散数学 置换群】

    题意: 给你一个方程,方程太变态不打,给你一个p一个k,p保证是大于等于3的质数,k保证在0~p-1之间的整数.要求对应函数的定义域在0~p-1值域为0~p-1的子集,求这样的函数有多少个... 分析 ...

  10. Hdfs增量导入小文件合并的思路

    1.使用mr进行合并 2.使用getmerge 将文件拉取到本地,再上传到hdfs,注意nl参数 3.使用appendToFile 4.使用hadoop提供的打包压缩技术 Usage: hadoop ...