css scale 元素放大缩小效果
<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 元素放大缩小效果的更多相关文章
- 纯CSS实现内容放大缩小效果
先搭架子 再实现第一个内容 填充更多内容 拆掉border,查看最终效果 html代码 <!-- 服务 --> <div class="service"> ...
- 制作一个顶部图片可以拉伸放大缩小效果的tableViewHeader
最近负责公司项目个人中心的项目模块研发,首页是一个头部图片可以拉伸放大缩小效果的tableViewHeader,今天这个demo和教程我增加了模糊效果和头像缩小效果.具体效果如图: 如果这个效果是想要 ...
- 自定义ImageView实现图片手势滑动,多点触摸放大缩小效果
首先呢,还是一贯作风,我们先来看看众多应用中的示例:(这种效果是很常见的,可以说应用的必须品.) 搜狐客户端 ...
- html 图片在一个div中放大缩小效果
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- -webkit-transform:scale(1.04)放大缩小效果
<p>[鼠标移动进去图片放大一倍效果:运用了-webkit-transform:scale(1.04)效果]</p> 如图:鼠标移动上去的时候图片放大一倍的效果, <!D ...
- 一个CSS+jQuery的放大缩小动画效果
日期: 2013年9月23日 作者:铁锚 // 今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. // 都是定死了的.因为需求就只有4个元素.如果是要用CSS的cla ...
- 使用CSS让元素尺寸缩小时保持宽高比例一致
CSS中有一个属性padding对元素宽度存在依存关系.如果一个元素的 padding属性以百分比形式表示,padding 的大小是以该元素自身宽度为参照的. 若想要元素尺寸变化时,宽高比例不变,可以 ...
- CSS基础 元素整体透明效果(包含内容+背景及子元素)
属性名:opacity:数字+px; 数字值取值0-1之间数字 数字值:1表示完全不透明 0表示完全透明使用后效果 html结构代码 <div class="box"> ...
- imageView图片放大缩小及旋转
imageView图片放大缩小及旋转 一.简介 二.方法 1)设置图片放大缩小效果 第一步:将<ImageView>标签中的android:scaleType设置为"fitCen ...
随机推荐
- don\'t have permission access on this server听语音
在网络上已经有很多的类型较多的框架,例如wamp,xmap等基于apache+mysql集成的框架,只要通过架包的方式,把相关的内容放到与这些的框架中后,启动服务器就可以执行架包内容,而在初始安装完成 ...
- J.U.C ThreadPoolExecutor解析
Java里面线程池顶级接口是Executor,但严格意义上讲Executor并不是一个线程池,而是一个线程执行工具,真正的线程池接口是ExecutorService.关系类图如下: 首先Executo ...
- SecurityException
摘录自http://www.cnblogs.com/haorenjie/archive/2012/09/12/2682655.html public boolean checkNetwork() { ...
- mysql修改表和列
mysql修改列 mysql增加列,修改列名.列属性,删除列语句 mysql修改表名,列名,列类型,添加表列,删除表列 alter table test rename test1; --修 ...
- 配置shiro错误
在web配置工程中配置shiro,如果启动Tomcat,报错:org.apache.shiro.web.config.WebIniSecurityManagerFactory.setDefaults ...
- Performance Testing 入门小结
从事软件测试两年多了,一直在做功能测试.2016年计划学习Performance.今天,先把之前听过的同事session以及自己查阅的资料小结一下. 一.什么是性能测试 首先来说一下软件的性能是什么. ...
- Unix/Linux命令:FTP
在Unix/Linux系统中,ftp命令用来实现客户机和远程主机之的文件传输. 语法:ftp [-Apinegvtd] [hostname] 参数:-p : 传输文件模式为被动模式-i : 关闭交互模 ...
- php等比例压缩图片
<?php function resizeImage($im,$maxwidth,$maxheight,$name,$filetype) { $pic_width = imagesx($im); ...
- 微信小程序左右滑动切换图片酷炫效果
开门见山,先上效果吧!感觉可以的用的上的再往下看. 心动吗?那就继续往下看! 先上页面结构吧,也就是wxml文件,其实可以理解成微信自己封装过的html,这个不多说了,不懂也没必要往下看了. < ...
- php 利用Gd库添加文字水印乱码的问题及解决方案
最近一个项目进行了服务器迁移,部署后发现 ,其中一个为图片添加水印文字的功能出现了乱码问题,确认功能代码不存在问题,同时项目代码都是使用UTF-8编码,不存在编码问题,也检查排除了字体文件出现问题的可 ...