<!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. Python Web学习笔记之进程与线程

    要了解二者的区别与联系,首先得对进程与线程有一个宏观上的了解. 进程,是并发执行的程序在执行过程中分配和管理资源的基本单位,是一个动态概念,竟争计算机系统资源的基本单位.每一个进程都有一个自己的地址空 ...

  2. 20145329 《网络对抗技术》Web安全基础实践

    实践的目标 理解常用网络攻击技术的基本原理.Webgoat实践下相关实验:SQL注入攻击.XSS攻击.CSRF攻击. 实验后回答问题 (1)SQL注入攻击原理,如何防御 攻击原理 SQL注入即是指we ...

  3. 20165310_获奖感想与Java阶段性学习总结

    获奖感想与Java阶段性学习总结 一.Learning By Doing ​ 在此之前,其实我并没有想到能够成为小黄杉的第一批成员之一,喜悦之余,也感受到了许多的压力.小黄杉一方面代表了老师对于我这一 ...

  4. 20165211 2017-2018-2 《Java程序设计》第2周学习总结

    20165211 2017-2018-2 <Java程序设计>第2周学习总结 教材学习内容总结 本周,我学习了书本上二三两章的内容,以下是我整理的主要知识 第二章 基本数据类型与数 标识符 ...

  5. FATFS（A）

    (一),什么是文件管理系统 答:数据在PC上是以文件的形式储存在磁盘中的,这些数据的形式一般为ASCII码或二进制形式.简单点说就是:管理磁盘上的文件的方法的代码! 如:我们写到SD卡上面的数据管理一 ...

  6. vim的几个插件mark.vim ctrlp.vim等

    开发过程中, 保证语义的前提下, 尽量使用 短的 变量名: 如: 用 $map来代替 $condition, 因为在书写长的变量名的时候, 容易写错, 而排查错误, 还不容易找出来. vim在浏览和排 ...

  7. 分布式系统一致性协议--2PC,3PC

    分布式系统中最重要的一块,一致性协议,其中就包括了大名鼎鼎的Paxos算法. 2PC与3PC 在分布式系统中,每一个机器节点虽然能够明确知道自己在进行事务操作过程中的结果是成功或是失败,但是却无法直接 ...

  8. How do I update a GitHub forked repository?

    I recently forked a project and applied several fixes. I then created a pull request which was then ...

  9. Pc端css初始化

    @charset "UTF-8"; /**css初始化**/ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd ...

  10. Visual Studio 项目模板制作(四)

    上一篇,介绍了VSIX安装模板的方法,那么,你是不是要问,为何有些项目模板却可以有向导,那是怎么做到的 今天这篇文章就是介绍如何为自己的模板添加向导,向导可以引导你完成项目中各种参数的设置,比如项目创 ...