CSS3 由小变大的过渡动画

陈88

29544667

发布于
2016-12-02

一个DIV，由小变大，然后加透视

怎么实现啊。

单纯的使用scale好像不怎么明显啊。如果加上透视，效果更逼真啊。

css

阅读 30.8k

6 个回答

得票最新

undefind_5

1.5k1298133

发布于
2016-12-02

✓ 已被采纳

用动画啊，`<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>
        .div{
            width: 100px;
            height: 100px;
            position: absolute;
            background: #C94E00;
            opacity: 1;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            animation: change 5s;
            -moz-animation: change 5s;    
            -webkit-animation: change 5s;    
            -o-animation: change 5s;
        }
        @keyframes change{
            from {width: 100px;height: 100px;opacity: 1;}
            to {width: 500px;height: 500px;opacity: 0;}
        }
    </style>
</head>
<body>
    <div class="div"></div>
</body>

</html>`

scort

8.4k2633

发布于
2016-12-02

更新于
2016-12-02

你指的是这样？

    div{
        width:100px;
        height:100px;
        background:red;
        transition:1s ease;
    }
    div:hover{
        transform:scale(2);
        opacity:0;
    }

张国锋

发布于
2016-12-02

新手上路，请多包涵

css3 animation 可以实现