猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

CSS3 由小变大的过渡动画

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

怎么实现啊。

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


神不在的星期二
浏览 8308回答 2
2回答

呼啦一阵风

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

慕的地10843

用动画啊，`<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <title>动画</title>&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; .div{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 100px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: #C94E00;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity: 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translate(-50%, -50%);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; animation: change 5s;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -moz-animation: change 5s; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -webkit-animation: change 5s; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -o-animation: change 5s;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; @keyframes change{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; from {width: 100px;height: 100px;opacity: 1;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; to {width: 500px;height: 500px;opacity: 0;}&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style></head><body>&nbsp; &nbsp; <div class="div"></div></body></html>`
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

CSS3