<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. ios知识点总结——UITableView的展开与收缩及横向Table

    UITableVIew是iOS开发中使用最为广泛的一种控件,对于UITableView的基本用法本文不做探讨,本文主要是针对UITableView的展开与收缩进行阐述,在文章的后面也会探讨一下横向ta ...

  2. 【编程技巧】ExtJs 设置GridPanel表格文本垂直居中

    详细讲解见 http://blog.csdn.net/li396864285/article/details/9310983 以下是我改修的代码: {         width:90,        ...

  3. JSP页面中的pageEncoding和contentType的区别

    <%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> pag ...

  4. nodejs http小爬虫

    本课程用nodejs写一个http小爬虫,首先科普一下,爬虫就是把网上的网页代码给弄下来,然后纳为己用.目前最大的爬虫:百度快照等的. 下面直接上代码 示例一: var http = require( ...

  5. gRPC实战

    gRPC是Google开源的一款非常棒的系统间通信工具,完美的communication抽象,构建在protobuf之上的RPC. 下面我们聊聊它的应用场景,grpc为分布式系统而生,可以是系统间通信 ...

  6. system进程占用80端口

    服务器规划:apache分配80,iis分配其他端口 理论上,只需要把iis 默认站点的80端口改成其他端口就可以了,可是发现改了apache80端口还是用不了, cmd查了下,发现system进程占 ...

  7. Linux 性能搜集【top/vmstat/iostat】

    为方便问题发生后,问题原因的分析排查,我们可以在服务器中事先部署如下脚本,方便故障发生后,问题原因的分析排查 脚本部署方法: 1.将脚本[top_monitor.sh]上传到服务器 2.登陆虚拟机,并 ...

  8. Storm保证消息处理

    Guaranteeing Message Processing Storm保证每一个tuple被完全处理.Strom中一个核心的机制是它提供了一种跟踪tuple血统的能力,它使用了一种十分有效的方式跟 ...

  9. aliyun 购买的linux安装tomcat

    按照网上的教程,下载tomcat,解压(即安装),启动,发现无法访问.有说端口未开放,修改/etc/sysconfig/iptables,添加端口开放.未发现有此文件,只有iptables-confg ...

  10. JS 中的this指向问题和call、apply、bind的区别

    this的指向问题 一般情况下this对象指向调用函数的对象,全局环境中执行函数this对象指向window. function a(){ console.log(this); //输出函数a中的th ...