transition多个属性同时渐变(width,height,background)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Transition动画</title>
<style>
div {
width:200px;
height:160px;
background-color:red;
border-radius:30px;
/*指定背景色、宽度、高度会以平滑渐变的方式来改变指定动画持续时间为2秒，动画会延迟2秒才启动*/
-moz-transition:background-color 2s linear 2s,width 2s linear 2s,height 2s linear 2s;
-webkit-transition:background-color 2s linear 2s,width 2s linear 2s,height 2s linear 2s;
-o-transition:background-color 2s linear 2s,width 2s linear 2s,height 2s linear 2s;
}
button {
width:70px;
height:35px;
margin:10px;
}
</style>
<script>
var orignWidth = 200;
var orignHeight = 160;
var zoom = function (scale,bgColor) {
var target=document.getElementById("target")
target.style.width = orignWidth * scale + "px";
target.style.height = orignHeight * scale + "px";
target.style.background = bgColor;
}
</script>
</head>
<body>
<button onclick="zoom(2,'blue')">放大</button>
<button onclick="zoom(0.5,'yellow')" >缩小</button>
<button onclick="zoom(1,'pink')">恢复</button>
<div id="target" style="color:#000; font-size:24px; line-height:160px; font-weight:bold; text-align:center; ">小蕾</div>
</body>
</html>
transition多个属性同时渐变(width,height,background)的更多相关文章
- transition多个属性同时渐变(left/top)
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> < ...
- 如何理解VB窗体中的scale类属性及width height属性之间的关系
如何理解VB窗体中的scale类属性及width height属性之间的关系 VB中的SCALEHIEGT,SCALEWIDTH,与窗体中的WIDTH,HEIGHT的区别及关系是许多VB初学者难以理解 ...
- as3:sprite作为容器使用时，最好不要指定width,height
除 TextField 和 Video 对象以外,没有内容的显示对象(如一个空的 Sprite)的高度为 0,即使您尝试将 height 设置为其它值,也是这样. 如果您设置了 height 属性,则 ...
- offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRect()
开篇提示:以下内容都经个人测试,参考API文档总结,但还是不能保证完全正确,若有错误,还请留言指出___________________________________________________ ...
- css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性
一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向 ...
- client/scroll/offset width/height/top/left ---记第一篇博客
client/scroll/offset width/height/top/left (盒模型为contentBox,定位原点是元素左上角边框最外层的交点) clientWidth width+左p ...
- 正则：img的url,width,height 和 a标签的url以及替换
代码:// 内容:$detail['content'] //img的url,width,height $img = array(); $matches = array(); $regeImg = '/ ...
- ffmpeg按比例缩放--"width / height not divisible by 2" 解决方法
最近在处理视频的时候,有这么一个需求 如果视频的分辨率宽度大于960的话,就把宽度设为960,而高度按其比例进行缩放 如果视频的分辨率高度大于540的话,就把高度设为540,而宽度按其比例进行缩放 之 ...
- html5常用属性text-shadow、vertical-align、background如何使用
html5常用属性text-shadow.vertical-align.background如何使用 一.总结 一句话总结: 1.text-shadow:[x轴(X Offset) y轴(Y Offs ...
随机推荐
- C 运算优先级口诀
运算优先级口诀: 括号成员第一; //括号运算符[]() 成员运算符. -> 全体单目第二; //所有的单目运算符比如!.~.++. --. +(正). -(负) ...
- 20145105 《Java程序设计》第10周学习总结
20145105 <Java程序设计>第10周学习总结 教材学习内容总结 JAVA网络编程 一.网络概述 (一)计算机网络概述 网络编程的实质就是两个(或多个)设备(例如计算机)之间的数据 ...
- bzoj 3600 没有人的算术 - 替罪羊树 - 线段树
题目都是图片,就不给了,就给链接好了 由于bzoj比较慢,就先给[vjudge传送门] 有兴趣的可以去逛bzoj[bzoj传送门] 题目大意 有n个数a[1],a[2],...,a[n],它们开始都是 ...
- SC命令---安装、开启、配置、关闭windows服务 bat批处理(转载)
转载:http://www.jb51.net/article/49627.htm 转载:http://blog.csdn.net/c1520006273/article/details/5053905 ...
- SpringCloud请求响应数据转换（一）
异常现象 近期做Spring Cloud项目,工程中对Controller添加ResponseBodyAdvice切面,在切片中将返回的结果封装到ResultMessage(自定义结构),但在Cont ...
- Python3基础 random 配合while输出10个随机整数
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- 三点估算和PERT技术
三点估算是PMP考试中的必考题目,每次约2-4道题目.现在就三点估算和PERT技术做详细讲解,以飨读者. 通过考虑估算中的不确定性和风险,可以提高活动持续时间估算的准确性.这个概念起源于计划评审技术( ...
- PyCharm/IDEA 使用技巧总结
基本概念 IDEA 没有类似 Eclipse 的工作空间的概念(workspace),最大单元就是 Project.这里可以把 Project 理解为 Eclipse 中的 workspace.Mod ...
- hdu1866 A + B forever!（面积并）题解
A + B forever! Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) T ...
- system.data.sqlite的源代码下载
帮助文档 http://system.data.sqlite.org/index.html/doc/trunk/www/index.wiki 历史版本https://system.data.sqlit ...