为了账号安全,请及时绑定邮箱和手机立即绑定

CSS3 由小变大的过渡动画

CSS3 由小变大的过渡动画

神不在的星期二 2018-08-27 11:09:19
一个DIV,由小变大,然后加透视怎么实现啊。单纯的使用scale好像不怎么明显啊。如果加上透视,效果更逼真啊。
查看完整描述

2 回答

?
呼啦一阵风

TA贡献1802条经验 获得超6个赞

    div{

        width:100px;

        height:100px;

        background:red;

        transition:1s ease;

    }

    div:hover{

        transform:scale(2);

        opacity:0;

    }


查看完整回答
反对 回复 2018-09-02
?
慕的地10843

TA贡献1785条经验 获得超8个赞

用动画啊,`<!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>`

查看完整回答
反对 回复 2018-09-02
  • 2 回答
  • 0 关注
  • 8296 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信