之前用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>
网友评论