zoukankan      html  css  js  c++  java
  • transition多个属性同时渐变(width,height,background)

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Transition动画</title>
        <style>
            div {
            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 {
            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>

  • 相关阅读:
    Laravel在不同的环境调用不同的配置文件
    Sphinx全文索引 第一节
    Eclipse 快捷键 (应用中自己总结)
    Ehcache计算Java对象内存大小
    计算Java对象内存大小
    HashMap
    CPU高的排查
    JVM-GC学习
    详细分析Java中断机制-转载
    GC知识记录
  • 原文地址:https://www.cnblogs.com/xiaoleidiv/p/3159968.html
Copyright © 2011-2022 走看看