css3 transition动画


1、transition-property 设置过渡属性，比如:width height background-color
2、transition-duration 设置过渡时间，比如:1s 500ms
3、transition-timing-function 设置过渡的运动方式，常用有: linear(匀速) ease(缓冲运动，这个接近自然运动，用的较多)
4、transition-delay 设置动画的延迟
5、transition:property duration timing-function delay 同时设置四个属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width:200px;
height:200px;
background-color:gold;

/*transition:width 1s ease*/
/*transition:width 1s ease,height 1s ease;*/
/*transition:width 1s ease,height 1s ease,background-color 1s ease;*/

/*如果是多个属性同时做动画，可以合并成以下：*/
transition:all 1s ease;
}

.box:hover{
width:400px;
height:400px;
background-color:red;
}


</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

 

 


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width:200px;
height:300px;
border:2px solid #000;
position: relative;
margin:50px auto;
text-align:center;
overflow: hidden;
}
.img{
width:200px;
height:300px;
background-color: gold
}

.hide{
position: absolute;
left:0;
top:300px;
width:200;
height:120px;
background-color:rgba(0,0,0,0.3);
color:#fff
margin:0 auto;

transition:all 500ms 
}

.box1:hover .hide{
left:0;
top:180px;
}
</style>
</head>
<body>
<div class="box1">鼠标移上来弹出效果
<div class="img"></div>
<div class="hide">
<h3>info:</h3>
<p>this is some text information</p>
</div>
</div>
</body>
</html>

 

posted @ 2019-03-01 13:31  greenfan  阅读(227)  评论(0)    收藏  举报