1. 实例
2.HTML 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3-Fade</title>
<link rel="stylesheet" type="text/css" href="./fade.css">
</head>
<body>
<div class="container">
<div class="fade fade-in">
fade-in
</div>
<div class="fade fade-top">
fade-top
</div>
<div class="fade fade-bottom">
fade-bottom
</div>
<div class="fade fade-left">
fade-left
</div>
<div class="fade fade-right">
fade-right
</div>
<div class="fade bounce-top">
bounce-top
</div>
<div class="fade bounce-bottom">
bounce-bottom
</div>
<div class="fade bounce-left">
bounce-left
</div>
<div class="fade bounce-right">
bounce-right
</div>
<div class="fade fade-center-out">
fade-center-out
</div>
<div class="fade fade-center-in">
fade-center-in
</div>
<div class="fade fade-middle-out">
fade-middle-out
</div>
<div class="fade fade-middle-in">
fade-middle-in
</div>
</div>
</body>
</html>
3.CSS 代码
*{
padding:0;
margin:0;
}
html{
background: -webkit-radial-gradient(#222222, #000000);
background: radial-gradient(#222222, #000000);
height: 100%;
text-align: center;
width:100%;
}
.container{
width: 800px;
margin: 200px auto;
text-align: left;
}
.fade{
cursor: pointer;
box-sizing: border-box;
display: inline-block;
color: #09f;
background: white;
padding: 10px 20px;
text-align: center;
margin: 10px 0;
/* 设置相对定位 */
position: relative;
transition: all 0.3s;
/* 设置层次 会被before after在上面 */
z-index:1;
}
.fade:hover{
color: white;
}
/* 其实使用背景颜色变化就可以的 但是这里为了做统一*/
.fade:before,.fade:after
{
display: block;
transition: all 0.3s;
background: #09f;
position: absolute;
content: '';
z-index: -1;
}
.fade-left:before,.fade-right:before,
.fade-center-out:before,.fade-center-out:after,
.fade-center-in:before,.fade-center-in:after,
.bounce-left:before,.bounce-right:before
{
height: 100%;
top:0;
width:0;
}
.fade-middle-out:before,.fade-middle-out:after,
.fade-middle-in:before,.fade-middle-in:after,
.bounce-bottom:before
{
height: 0;
width: 100%;
left:0;
}
/* 弹跳元素设置时间线 使用三次贝塞尔曲线 */
.bounce-top:before,.bounce-bottom:before,
.bounce-left:before,.bounce-right:before{
transition-timing-function: cubic-bezier(0.52, 1.7, 0.5, 0.4);
}
.fade-in:before{
height: 100%;
width: 100%;
opacity: 0;
top:0;
left: 0;
}
.fade-bottom:before, .fade-top:before,.bounce-top:before{
height: 0;
width: 100%;
left: 0;
}
.fade-top:before,.bounce-top:before,.fade-middle-out:before{
top:0;
}
.fade-bottom:before,.fade-middle-out:after,.bounce-bottom:before{
bottom: 0;
}
.fade-left:before,.fade-center-in:before,.bounce-left:before{
left:0;
}
.fade-right:before,.fade-center-in:after,.bounce-right:before{
right:0;
}
.fade-center-out:before{
right: 50%
}
.fade-center-out:after{
left: 50%
}
.fade-middle-in:before{
bottom:50%;
}
.fade-middle-in:after{
top:50%;
}
.fade-in:hover:before{
opacity: 1;
}
.fade-left:hover:before,.fade-right:hover:before,
.bounce-left:hover:before,.bounce-right:hover:before
{
width: 100%;
}
.fade-top:hover:before,.fade-bottom:hover:before,
.bounce-top:hover:before,.bounce-bottom:hover:before{
height: 100%;
}
.fade-center-out:hover:before,.fade-center-out:hover:after,
.fade-center-in:hover:before,.fade-center-in:hover:after{
width:50%;
}
.fade-middle-out:hover:before,.fade-middle-out:hover:after,
.fade-middle-in:hover:before,.fade-middle-in:hover:after
{
height:50%;
}
4. 练习
区别只是 heigth属性所设置的高度大小