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. Linux下安装Firefox以及更新Adobe flash

    一直无法舍弃Firefox浏览器,老是提示更新,但包管理器中的版本又不是最新版,只能自己手动安装了(一下是在Ubuntu14.04环境中进行的). 1.去官网下载最新版本 2.进入下载目录,解压文件 ...

  2. 微软职位内部推荐-SDEII

    微软近期Open的职位: Software Engineer II for Customer Experience (Level 62+) Location: Suzhou Contact Perso ...

  3. JSON WEB TOKENS

    用JWT来保护我们的ASP.NET Core Web API   在上一篇博客中,自己动手写了一个Middleware来处理API的授权验证,现在就采用另外一种方式来处理这个授权验证的问题,毕竟现在也 ...

  4. 向Array中添加二分插入排序

    二分插入排序思路 先在有序区通过二分查找的方法找到移动元素的起始位置,然后通过这个起始位置将后面所有的元素后移. 二分插入排序实现 Function.prototype.method = functi ...

  5. windows phone和android,ios的touch事件兼容

    1.开发背景 最近用html5写了个小游戏,中间踩过无数坑,有很多甚至百度都百度不到答案,可见html5还真是不成熟,兼容性的复杂度比ie6有过之而无不及,性能那个渣简直无力吐槽.. 好了,吐槽结束, ...

  6. android activity之间传递返回值

    activity A,跳转至 Activity B ,A传参数user_name给B,然后B再返回修改后的参数user_name给A 首先A传user_name给B Intent input_B = ...

  7. SQL-AdventureWorks样例数据库

    1. 下载样例数据库文件 输入网址:http://www.codeplex.com/ , 搜索:microsoft sql server product samples 下载对应数据库的Adventu ...

  8. 【CentOS】安装chrome

    参考资料:http://www.cnblogs.com/xia520pi/p/3545715.html 问题描述: 出现如下错误: 升级glibc任然无效,最后在博客园:http://www.cnbl ...

  9. ASP.NET - 演练：创建网页以显示 XML 数据

    数据通常是以 XML 格式提供给 Web 应用程序的.但是,XML 数据本质上是分层的,因此您可能希望能够在基于列表的控件中使用 XML 数据,如 GridView 或 DropDownList 控件 ...

  10. HDU4871 Shortest-path tree(树分治)

    好久没做过树分治的题了,对上一次做是在南京赛里跪了一道很裸的树分治题后学的一道,多校的时候没有看这道题,哪怕看了感觉也看不出来是树分治,看出题人给了解题报告里写了树分治就做一下好了. 题意其实就是给你 ...