<style>
.trans-scale {
width: 300px;
height:300px;
margin:100px auto;
background:#99F; transition-function: ease-out;
transition-duration: 1000ms;
-webkit-transition-function: ease-out;
-webkit-transition-duration: 1000ms;
-moztransition-function: ease-out;
-moztransition-duration: 1000ms;
-o-transition-function: ease-out;
-o-transition-duration: 1000ms;
} .trans-scale:hover {
transform: scale(1.25, 1.25);
-webkit-transform: scale(1.25, 1.25);
-moz-transform: scale(1.25, 1.25);
-o-transform: scale(1.25, 1.25);
}
</style> <div class="trans-scale"></div>

css scale 元素放大缩小效果的更多相关文章

  1. 纯CSS实现内容放大缩小效果

    先搭架子 再实现第一个内容 填充更多内容 拆掉border,查看最终效果 html代码 <!-- 服务 --> <div class="service"> ...

  2. 制作一个顶部图片可以拉伸放大缩小效果的tableViewHeader

    最近负责公司项目个人中心的项目模块研发,首页是一个头部图片可以拉伸放大缩小效果的tableViewHeader,今天这个demo和教程我增加了模糊效果和头像缩小效果.具体效果如图: 如果这个效果是想要 ...

  3. 自定义ImageView实现图片手势滑动,多点触摸放大缩小效果

    首先呢,还是一贯作风,我们先来看看众多应用中的示例:(这种效果是很常见的,可以说应用的必须品.)                搜狐客户端                               ...

  4. html 图片在一个div中放大缩小效果

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  5. -webkit-transform:scale(1.04)放大缩小效果

    <p>[鼠标移动进去图片放大一倍效果:运用了-webkit-transform:scale(1.04)效果]</p> 如图:鼠标移动上去的时候图片放大一倍的效果, <!D ...

  6. 一个CSS+jQuery的放大缩小动画效果

    日期: 2013年9月23日 作者:铁锚 // 今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. // 都是定死了的.因为需求就只有4个元素.如果是要用CSS的cla ...

  7. 使用CSS让元素尺寸缩小时保持宽高比例一致

    CSS中有一个属性padding对元素宽度存在依存关系.如果一个元素的 padding属性以百分比形式表示,padding 的大小是以该元素自身宽度为参照的. 若想要元素尺寸变化时,宽高比例不变,可以 ...

  8. CSS基础 元素整体透明效果(包含内容+背景及子元素)

    属性名:opacity:数字+px; 数字值取值0-1之间数字 数字值:1表示完全不透明 0表示完全透明使用后效果 html结构代码 <div class="box"> ...

  9. imageView图片放大缩小及旋转

    imageView图片放大缩小及旋转 一.简介 二.方法 1)设置图片放大缩小效果 第一步:将<ImageView>标签中的android:scaleType设置为"fitCen ...

随机推荐

  1. DEDE中 field:rel 是什么意思,起一个什么样的作用效果

    DEDE中 field:rel 是什么意思,起一个什么样的作用效果 这是一段调用导航栏目的代码 {dede:channel type='top' row='10' } [field:typename/ ...

  2. ZendOptimizer怎么安装?Php网站打开显示乱码

    http://jingyan.baidu.com/article/4e5b3e1952a99291901e24cf.html 安装zendoptimizer软件 1 网上下载对应的zend版本,点击进 ...

  3. 织梦首页、列表页调用文章body内容的两种方法

    http://blog.csdn.net/langyu1021/article/details/52261411 关于首页.列表页调用文章body内容的两种方法,具体方法如下: 第一种方法: {ded ...

  4. webkit

    HTML, 从HTML文档的开始到结束排列: <meta name="viewport" content="width=device-width, initial- ...

  5. OKMX6Q LTIB编译

    因为在16.04上编译有许多解决不了的错误,最后还是在飞凌的12.04虚拟机上编译的. 按照手册<OKMX6X-S2-LTIB编译手册-V1.1-2016-08-18>进行到第8步时,出现 ...

  6. myeclipse10不用打开myeclipse configuration center安装插件的方法

    我使用myeclipse10,网上找了一大堆的插件安装方法,全部都是要通过help->myeclipse configuration center进行安装 不用打开myeclipse  conf ...

  7. Linux日志轮循实现(shell)

    在Linux系统中,日志的使用非常频繁,那么对日志就需要一定策略的管理,包括存放目录的设计,log文件命名规则,历史log文件的存放,log目录的容量限制,另外还有日志轮循. 日志轮循就是,将过期的l ...

  8. 2017-06-26(groupadd groupmod groupdel)

    groupadd groupadd  组名  (创建用户组) groupadd -g  组编号   组名 (创建组名 并且指定编号) groupmod groupmod  -n   新组名  旧组名 ...

  9. 针对php脚本文件执行锁定的代码,避免脚本在同一时间重复运行

    <?php//针对php脚本文件执行锁定的代码,避免脚本在同一时间重复运行,http://ken.01h.net/define('PHP_LOCK_FILE', dirname(__FILE__ ...

  10. apktool给软件加注册机修改图标和文件名

    功能实现,即让你的软件具有注册机功能,或者破解别人的软件,据为己有! 先反编译文件包 然后全局工具,修改图标和名称 加注册机,输入key,下载计算器,即可.给某个用户设置自定义的使用时间!