<!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)的更多相关文章

  1. transition多个属性同时渐变(left/top)

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    < ...

  2. 如何理解VB窗体中的scale类属性及width height属性之间的关系

    如何理解VB窗体中的scale类属性及width height属性之间的关系 VB中的SCALEHIEGT,SCALEWIDTH,与窗体中的WIDTH,HEIGHT的区别及关系是许多VB初学者难以理解 ...

  3. as3:sprite作为容器使用时，最好不要指定width,height

    除 TextField 和 Video 对象以外,没有内容的显示对象(如一个空的 Sprite)的高度为 0,即使您尝试将 height 设置为其它值,也是这样. 如果您设置了 height 属性,则 ...

  4. offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRect()

    开篇提示:以下内容都经个人测试,参考API文档总结,但还是不能保证完全正确,若有错误,还请留言指出___________________________________________________ ...

  5. css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性

    一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向 ...

  6. client/scroll/offset width/height/top/left ---记第一篇博客

    client/scroll/offset width/height/top/left (盒模型为contentBox,定位原点是元素左上角边框最外层的交点) clientWidth  width+左p ...

  7. 正则：img的url,width,height 和 a标签的url以及替换

    代码:// 内容:$detail['content'] //img的url,width,height $img = array(); $matches = array(); $regeImg = '/ ...

  8. ffmpeg按比例缩放--"width / height not divisible by 2" 解决方法

    最近在处理视频的时候,有这么一个需求 如果视频的分辨率宽度大于960的话,就把宽度设为960,而高度按其比例进行缩放 如果视频的分辨率高度大于540的话,就把高度设为540,而宽度按其比例进行缩放 之 ...

  9. html5常用属性text-shadow、vertical-align、background如何使用

    html5常用属性text-shadow.vertical-align.background如何使用 一.总结 一句话总结: 1.text-shadow:[x轴(X Offset) y轴(Y Offs ...

随机推荐

  1. 轻量级文本标记语言-Markdown

    Markdown简介 接触过github的都知道,在发布项目的时候可以建立一个说明文件README.md,这个md文件就是Markdown文本编辑语言的文件. Markdown 是一种轻量级标记语言, ...

  2. troubleshooting-Container 'PHYSICAL' memory limit

    原因分析 CDH 集群环境没有对 Container分配足够的运行环境(内存) 解决办法 需要修改的配置文件,将具体的配置项修改匹配集群环境资源.如下: 配置文件 配置设置 解释 计算值(参考) ya ...

  3. 20145101《Java程序设计》第二周学习总结

    20145101 <Java程序设计>第2周学习总结 教材学习内容总结 在第三章的学习中,我学到了很多新知识点,了解到Java语言中的类型及其变量主要类型为:整数,还有char型,bool ...

  4. 20145106 java 实验四

    这次的实验是Android开发实验基础.Android开发是一个很大的工程,但是这次只是一个小小的入门. 首先将SDK文件复制到-根目录下,之后将Android Studio复制到电脑里. 并指明SD ...

  5. 20145227鄢曼君《网络对抗》Web安全基础实践

    20145227鄢曼君<网络对抗>Web安全基础实践 实验后回答问题 1.SQL注入攻击原理,如何防御? SQL注入攻击指的是通过构建特殊的输入作为参数传入Web应用程序,而这些输入大都是 ...

  6. ubuntu下交叉编译imagemagick

    环境:ubuntu16.04 交叉编译器版本号:4.8.3 在编译之前要编译以下其依赖的软件或库:freetype,libpng,libxml2,libtiff,libjpeg,zlib,graphv ...

  7. P1349 广义斐波那契数列(矩阵加速)

    P1349 广义斐波那契数列 题目描述 广义的斐波那契数列是指形如an=pan-1+qan-2的数列.今给定数列的两系数p和q,以及数列的最前两项a1和a2,另给出两个整数n和m,试求数列的第n项an ...

  8. Unity3D学习笔记（十九）：UGUI、Image、Text、Button

    UGUI:Unity官方最新,与NGUI同源 UI:User Interface(用户的操作界面),图片+文字 UGUI的组件: 1.创建UGUI组件时,会默认创建Canvas(画布)和EventSy ...

  9. 列举一些有所帮助的blog和文章

    w3school hdoj imooc CSDN Github myGithub CmdMarkdown 一直在路上--记我从初中到本科近十年的学习成长历程 作者:周见智 C++中队列的建立与操作详细 ...

  10. shell 浮点运算

    浮点运算 let 和 expr 都无法进行浮点运算,但是 bc 和 awk 可以. 范例:求 除以 ,保留 位有效数字 $ echo "scale=3; 1/13" | bc . ...