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. 数据库的编码浅谈（ZHS16GBK与US7ASCII）

     数据库的编码浅谈(ZHS16GBK与US7ASCII) 2007-11-15 17:14:18 分类: Oracle SQL> SELECT RAWTOHEX('郭A军') from dual ...

  2. Linux 系统Telnet服务

    Linux 系统Telnet服务 telnet与ssh相比,安全性能并不高,但是在ssh版本升级或者其他的情况下还是需要开启这一项服务.linux提供服务是由运行在后台的守护进程daemon来执行的, ...

  3. [网络配置相关]——netstat命令

    netstat:显示网络状态信息 -a   显示所有连接状态的网络的所有选项-l    仅显示LISTEN状态的连接-n   直接显示IP地址,而不通过域名服务器-p   把进程名和进程PID也显示出 ...

  4. 微软职位内部推荐-SR DEV

    微软近期Open的职位: JD 如果你想试试这个职位,请跟我联系,我是微软的员工,可以做内部推荐.发你的中英文简历到我的邮箱:Nicholas.lu.mail(at)gmail.com

  5. 避免写出IE Bug

    https://github.com/KitWong/KitWong.github.io/tree/master/_posts

  6. VMWare Workstation 11安装CentOS7,附图 [原创]

    1.新建虚拟机 2.新建虚拟机向导,选择典型 3.选择稍后安装操作系统 4.选择linux版本,注意:宿主系统是64位的,此处就得选64位:宿主系统是32位的,此处就得选32位 5.选择路径 6.指定 ...

  7. linux - 自动删除n天前日志

    1.删除文件命令: find 对应目录 -mtime +天数 -name "文件名" -exec rm -rf {} \; 实例命令: find /opt/soft/log/ -m ...

  8. 五、案例-指令参考-freemarker指令、表达式

    案例-指令参考描述:本人自己测试写了一遍,如有错的地方,懂freemarker的朋友望指点指点! 案例-指令参考 表达式 一. Assign 1.<#assign name1="北京& ...

  9. 系统集成之用户统一登录( LDAP + wso2 Identity Server)

    本文场景: LDAP + wso2 Identity Server + asp.net声明感知 场景 ,假定读者已经了解过ws-*协议族,及 ws-trust 和 ws-federation. 随着开 ...

  10. [工作积累] error: bad class file magic (cafebabe) or version (0033.0000)

    Update Android SDK build tool to latest can solve my problem.