transition多个属性同时渐变(width,height,background)

最新推荐文章于 2024-01-26 22:21:23 发布

weixin_30328063

最新推荐文章于 2024-01-26 22:21:23 发布

阅读量389

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/xiaoleidiv/p/3159968.html

版权

<!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 οnclick="zoom(2,'blue')">放大</button>
    <button οnclick="zoom(0.5,'yellow')" >缩小</button>
    <button οnclick="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>

转载于:https://www.cnblogs.com/xiaoleidiv/p/3159968.html

weixin_30328063

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
transition多个属性同时渐变(width,height,background)

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Transition动画</title> <style> div { width:200px; height:160...
复制链接

扫一扫