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 ...
随机推荐
- php 抽奖概率 随机数
<?php $prize_arr = array( '0' => array('id' => 1, 'title' => 'iphone5s', 'v' => 5), ' ...
- android 基础04-BroadCastReceiver
Android 系统中的广播(BroadCast) 是组件与组件进行的一种可跨线程的通信方式.类似于 广播者-订阅者(publish-subscribe) 的实现,当系统或者某个应用的状态发生改变时, ...
- 03 整合IDEA+Maven+SSM框架的高并发的商品秒杀项目之web层
Github:https://github.com/nnngu 项目源代码:https://github.com/nnngu/nguSeckill 前端交互流程设计 对于一个系统,需要产品经理.前端工 ...
- Linuxc - C语言下return 0的意义
两条指令同时执行,前提是第一条指令返回0.否则不执行第二条指令. root@jiqing-virtual-machine:~/cspace/les3# gcc main.c -o main.out & ...
- vue 的准备项目架构环境配置
一.环境搭建 中国镜像 composer config repo.packagist composer https://packagist.phpcomposer.com 命令 composer in ...
- np.array转换为list,嵌套的python list转成一个一维的python list
np.array转换为list 1 meitan = shuju.iloc[start:end, 1:2] zhengqi = shuju.iloc[start:end,2:3] print(type ...
- 2.CLI标准
CLI 简称(CLI标准) 通用语言架构 维基百科地址: http://zh.wikipedia.org/wiki/通用语言架构 是一个开放的 技术规范 .它是由 微软 联合 惠普 ...
- 转-CSS padding margin border属性详解
原文链接:http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在 ...
- 在Intellij IDEA 中clean报错:-Dmaven.multiModuleProjectDirectory system property is not set. Check $M2_HOME environment variable and mvn script match.
解决办法:添加VM属性 -Dmaven.multiModuleProjectDirectory=$M2_HOME
- Halcon一日一练:创建三通道图像
首先理解一个什么是三通道图像: 三通道图像就是彩色图像,我们之前黑白相机或黑白电视机都是彩用的灰阶图像,即单通道图像,一般是2的8次方个灰阶,即256个灰阶.彩色图像采用RGB,红绿蓝三个通道来合成彩 ...