transform的属性scale(x,y) 对元素进行缩放,x表示水平方向缩放倍数，y表示垂直方向的缩放倍数，y是可选参数，不设置，则表示两个方向的倍数是一样的，基点一样在元素的中心位置。

还有单向拉伸的scaleX和scaleY。

<html>

<head>

<title>Demo</title>

<style type="text/css">

.box{width:300px; height:169px;overflow:hidden;}

.suofang{display:block;width:300px; height:169px;transition: all 1s ease 0s;}

.suofang:hover{-webkit-transform:scale(2,2);-moz-transform:scale(2,2);-o-transform:scale(2,2);}

</style>

</head>

<body><div class="box">

<a href="#" class="suofang" style="background:url(suo.jpg) no-repeat;"></a>

</div>

</body>

</html>

常见的css3缩放效果的更多相关文章

  1. css3 3D效果

    css3 3D变形 transfrom初学 这个礼拜学了css3 3d,感觉到css无穷的魅力,可以通过几个特定的代码符号创建出3D效果的页面. ___ 透视 一个元素需要一个透视点才能激活3D空间, ...

  2. 【常见】CSS3进度条Loading动画

    现在,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.CSS3的崛起,更使得动态效果得以轻松实现,未来,必定是CSS3的天下,所以今天我就来分享一下几个常见的CSS3进度条Loadi ...

  3. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  4. Hover.css：一组超实用的 CSS3 悬停效果和动画

    Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...

  5. 10个实用的 CSS3 按钮效果制作教程

    人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...

  6. 学习制作精美 CSS3 按钮效果的10个优秀教程

    由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...

  7. Cool！15个创意的 CSS3 文本效果【下篇】

    这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...

  8. CSS3 动画效果带来的bug

    css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...

  9. animate.css 一些常用的CSS3动画效果

    大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...

随机推荐

  1. < java.lang >-- String字符串

    java中用String类进行描述.对字符串进行了对象的封装.这样的好处是可以对字符串这种常见数据进行方便的操作.对象封装后,可以定义N多属性和行为. 如何定义字符串对象呢?String s = &q ...

  2. Android L Camera2 API 使用实例程序汇总

    在网上发现几个使用Camera API2开发的实例程序,总结一下方便后续参考: 1.Camera2 Basic : https://github.com/googlesamples/android-C ...

  3. 微软职位内部推荐-Senior Software Engineer -Web

    微软近期Open的职位: Location: Beijing, China The Office App Services team is working on the powerful Office ...

  4. win32 sdk显示一个载入的位图的方法

    注:整理自网络文档 (1)加载位图 HANDLE LoadImage(HINSTANCE 来源实体,LPCTSTR 名称,UINT 位图类型, int 加载宽度,int 加载高度,UINT 加载方式) ...

  5. c语言编程之二叉排序树

    二叉排序树,又称为二叉查找树.它是一颗空树,或者是具有下面的性质的二叉树: 1.若它的左子树不空,则左子树上所有节点的值均小于它的根结构的值: 2.若它的右子树不空,则右子树上所有节点的值均大于它的根 ...

  6. hope is a good thing!

    好久没有写博客了,在这么特殊的日子里,似乎不写点东西感觉总是少了点什么.其实从昨天开始就在努力的回忆,回忆自己这个2014年都做了些什么?自己收获了些什么?突然就觉得去年的那个暑假是那么的熟悉,怎么又 ...

  7. token验证-微信公众平台开发3（asp.net）

    童鞋们直接看代码吧:(我这里是ashx处理程序写的类,开发过网站的一般都知道) <%@ WebHandler Language="C#" class="weixin ...

  8. 深入探讨Java类加载机制

    一.前言 毕业至今,已经三年光景,平时基本接触不到关于类加载器的技术(工作上),相信很多同行在开始工作后很长一段时间,对于类的加载机制都没有深入的了解过,之前偶然的机会接触了相关的知识,感觉挺有意思, ...

  9. 【POJ】【2891】Strange Way to Express Integers

    中国剩余定理/扩展欧几里得 题目大意:求一般模线性方程组的解(不满足模数两两互质) solution:对于两个方程 \[ \begin{cases} m \equiv r_1 \pmod {a_1} ...

  10. NYOJ-85 有趣的数 AC 分类： NYOJ 2014-01-17 21:42 240人阅读 评论(0) 收藏

    这道题目就是,找规律,小学奥数,找规律不难吧, #include<stdio.h> int sc(int x); int main(){ int n=0; int num,cs,k; sc ...