Css3 中运动与 js运动4 作比较
2017-03-20 本文已影响0人
maomizone
之前用js写了对象的运动，改变其高度，宽度，字号，透明度，但是缺点是同时只能进行一种运动，今天用css3的过渡来实现。
CSS3 过渡
缺点：兼容性一般
优点：可以同时对一个对象改变其高度等，更加灵活，不容易出错，可以运动的更多，像边框也可以
QQ图片20170320103009.png
HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>css过渡</title>
<style>
body{
background-color: #cccccc;
}
div{
width: 100px;
height: 100px;
background-color: crimson;
border: 2px solid white;
margin: 10px;
float: left;
color: white;
text-align: center;
line-height: 100px;
font-size: 15px;
opacity: 0.3;
}
div{
transition: all 1.5s ease;
-webkit-transition: all 1.5s ease;
-o-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
}
div:hover{
width:200px;
height: 250px;
opacity: 1;
font-size: 30px;
border: 10px solid black;
}
</style>
</head>
<body>
<div>同时</div>
</body>
</html>
效果
cssSport1.gif
