CSS3 由小变大的过渡动画
本文介绍了CSS3 由小变大的过渡动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
一个DIV，由小变大，然后加透视
怎么实现啊。
单纯的使用scale好像不怎么明显啊。如果加上透视，效果更逼真啊。
解决方案
用动画啊，`<!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>`
这篇关于CSS3 由小变大的过渡动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
