<!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. Centos下使用php调用shell脚本

    我们在实际项目中或许会遇到php调用shell脚本的需求.下面就用简单案例在Centos环境下实践 准备 查看php.ini中配置是否打开安全模式 //php.ini safe_mode = //这个 ...

  2. 06: Pymysql

    1.1 Pymysql安装与简介 1.安装 pip3 install pymysql 2.介绍(支持python3) 1. pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb ...

  3. 【运行错误】Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.

    代码如下: <html> <head> <script> /*window.frames[]可以通过下标或名称访问单独的frame*/ window.onload= ...

  4. POJ 1751 Highways（最小生成树&Prim）题解

    思路: 一开始用Kruskal超时了,因为这是一个稠密图,边的数量最惨可能N^2,改用Prim. Prim是这样的,先选一个点(这里选1)作为集合A的起始元素,然后其他点为集合B的元素,我们要做的就是 ...

  5. 1-20 RHEL7的启动原理和服务控制

    大纲: RHEL7启动原理 RHEL7服务启动配置 网络概述 发布内网服务器 ############################################################ ...

  6. Could NOT find Bullet (missing: BULLET_DYNAMICS_LIBRARY BULLET_COLLISION_LIBRARY BULLET_MATH_LIBRARY BULLET_SOFTBODY_LIBRARY BULLET_INCLUDE_DIR)

    rosdep where-defined bullet sudo apt-get install libbullet-dev

  7. 《剑指offer》第五题（替换空格）

    // 替换空格 // 题目:请实现一个函数,把字符串中的每个空格替换成"%20".例如输入“We are happy.”, // 则输出“We%20are%20happy.”. # ...

  8. tp3.x和tp 5的区别

    由于TP5.0是一个全新的颠覆重构版本,所以现在面试很多面试官喜欢问TP3.2和TP5之间的区别,那他们之间到底有哪些区别呢?一.目录  TP5目录 二.需要摒弃的 3.X 旧思想 模型的变动     ...

  9. angular5中使用echart的方法

    注意两点安装的版本 安装好后可以参照echart的官网使用 1.实现package.json中安装这两个包 2.index.html中引入 3.在appModule中添加 然后再html中就可以这么使 ...

  10. threejs和3d各种效果的学习

    写给即将开始threejs学习的自己,各种尝试,各种记忆.不要怕,灰色的年华终会过去. 一个技术学习的快慢,以及你的深刻程度,还有你的以后遇到这个东西的时候的反应速度,很大程度上,取决于你的博客的深刻 ...