<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. Double-checked locking and the Singleton pattern--双重检查加锁失效原因剖析

    以下内容摘取自http://stackoverflow.com/questions/11195389/out-of-order-writes-for-double-checked-locking Th ...

  2. STM32的串口

    一:2个状态位_itstatus与_flagstatus的区别: _flagstatus:只是读状态标志,不管中断是否使能或发生.例如使用查询方式发送数据就需要读改状态位. _itstatus:和中断 ...

  3. Windows下编译使用Aliyun OSS PHP SDK

    摘要: WIN环境下搭建Aliyun OSS PHP SDK编译运行环境.从PHP的安装逐步完成,SDK的编译运行.即使没有任何PHP基础,也能顺利完成. 安装环境:Win7 64 + PHP 5.6 ...

  4. Ubuntu查看磁盘空间命令（转载）

    linux中df命令的功能是用来检查linux服务器的文件系统的磁盘空间占用情况.可以利用该命令来获取硬盘被占用了多少空间,目前还剩下多少空间等信息. 1．命令格式: df [选项] [文件] 2．命 ...

  5. ruby-rails 环境搭建

    https://ruby-china.org/wiki/install_ruby_guide

  6. 和为S的两个数字VS和为s的连续正数序列

    题目:输入一个递增排序的数组和一个数字s,在数组中查找两个数,使得它们的和正好是s.如果有多对数字的和等于s,输出任意一对即可. 例如输入数组1.2.4.7.11.15和数字15.由于4+11=15, ...

  7. 利用Hadoop实现超大矩阵相乘之我见（一）

    前记 最近,公司一位挺优秀的总务离职,欢送宴上,她对我说“你是一位挺优秀的程序员”,刚说完,立马道歉说“对不起,我说你是程序员是不是侮辱你了?”我挺诧异,程序员现在是很低端,很被人瞧不起的工作吗?或许 ...

  8. 第10章 Posix 信号量

    10.1 概述 10.1.1 信号量类型 Posix有名信号量:使用Posix IPC名字,可用于进程或线程间同步: Posix基于内存的信号量:也叫做无名信号量,存放在共享内存中,可用于进程或线程间 ...

  9. db link的查看创建与删除

    1.查看dblink select owner,object_name from dba_objects where object_type='DATABASE LINK'; 或者 select * ...

  10. struts (三)

    1. <action name="test" class="com.gc.Test"> <result name="success& ...