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. SQL SERVER完整、差异和事务日志备份及还原(脚本和GUI实现) [原创]

    一．完整备份.差异备份和事务日志备份的脚本 --完整备份数据库 BACKUP DATABASE Test_Bak TO DISK = 'E:\20150609_75\bak\Test_bak_full ...

  2. 软件工程随堂小作业——随机四则运算（C++）

    一.设计思路: 1.程序的主体部分是循环输出,次数即题目数目由用户输入: 2.三个整型变量+rand函数来实现随机数四则运算,一个变量代表加减乘除,另外两个用作运算数: 3.用户体验:题目分三列,排列 ...

  3. 评价正在使用输入法软件产品----QQ拼音输入法

    评价一下大家手头正在使用输入法或者搜索类的软件产品. 我现在使用的是系统自带的QQ拼音输入法,以前使用的是搜狗拼音输入法,后来发现可能由于我的系统重装过好几次,搜狗输入法也重装了好几次,而每次都删不干 ...

  4. xml基础学习笔记01

    注意:刚刚看了网上对于XML中的标签,节点和元素?到底应该怎么表述?起初我也有这个疑惑,现在我的想法是:下面出现node的应称作节点,节点对象.element应称作元素,毕竟这更符合英文的本意.至于标 ...

  5. 【Symmetric Tree】cpp

    题目: Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center). F ...

  6. Python python 基本语法

    程序1 def buildConnectionString(params): """Build a connection string from a dictionary ...

  7. memcached使用说明

    1.在服务器上注册服务 2.启动服务:services.msc       3.客户端创建服务接口 object Get(string key); List<string> GetKeys ...

  8. Asp.net 导入Excel（服务器不带Office）

    #region 把excel文件转换为DataSet. /// <summary> /// 把excel文件转换为DataSet. /// </summary> /// < ...

  9. 如何将控制台程序包装成windows服务

    1. 新建一个项目,或者从选择当前解决方案--右键-添加--新建项目 2. 选择(项目类型)Visual C#项目,(模板)Windows 服务,填写要创建的服务名称(修改默认的WindowServi ...

  10. HDOJ 1709 The Balance(母函数)

    The Balance Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...