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. sudo su 提示没有配置JDK environment

    sudo su 提示没有配置JDK environment 最近工作遇到一问题,我通过SecureCRT远程登录服务器,部署web应用.将变更文件替换后,我需要切换到root用户,重启Tomcat.所 ...

  2. Java 7 中 NIO.2 的使用——第一节 Path 类的使用

    路径隶属于文件系统,实际上它是存储和组织媒体文件的格式,通常在一块或多块硬盘设备上,以便于非常容易地检索.文件系统可以通过  java.nio.file.FileSystems 这个final 类来访 ...

  3. transitionend 事件的兼容

    google :webkitTransitionEnd firefox :transitionend ie       : MSTransitionEnd

  4. Oracle 用户权限分配说明

    一般来说,Oracle普通用户创建后,不建议分配DBA权限.那么一般分配哪些权限呢? 首先来说,一个Oracle普通用户,我们一般性的要求是:   1.能够在本用户下进行本用户相关的创建表结构,数据维 ...

  5. 搜索 基础 AC 2014-01-14 15:53 170人阅读 评论(0) 收藏

    题目网址:http://haut.openjudge.cn/xiyoulianxi1/1/ 1:晶矿的个数 查看 提交 统计 提问 总时间限制:  1000ms  内存限制:  65536kB 描述 ...

  6. 关于gzip压缩

    关于gzip压缩 http://httpd.apache.org/docs/2.0/mod/mod_deflate.html http://www.phpchina.com/resource/manu ...

  7. Codeforces Round #261 (Div. 2)

    第一场难得DIV2简单+AK人数多: E:给出一张图,求最多的边数,满足:在这个边的集合中后面的边的权值大于前面的边; 思路:我们将图按权值排列,以为只可能边权值小的跟新权值大的所以对于一条边我们只跟 ...

  8. 利用 random 与 tertools 模块解决概率问题

    Python 中的 random 与 tertools 模块可以得到伪随机数与排列.组合,下面利用这两个模块求解一些有趣的概率问题. 一.random 与 tertools 模块 random 模块常 ...

  9. CkEditor 插件开发

    CKEditor的插件开发其实很简单只需要两步.1.通过CKEditor.plugins.add()方法编写插件的逻辑主体, 2.告诉CKEditor我们有一个自定义插件需要添加进来. //创建插件逻 ...

  10. centos mysql 操作

    安装mysqlyum -y install mysql-server 修改mysql配置 vi /etc/my.cnf 这里会有很多需要注意的配置项,后面会有专门的笔记 暂时修改一下编码(添加在密码下 ...