CSS3 按钮特效(一)

来源:互联网 时间:2017-12-09

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属性所设置的高度大小

相关阅读:
Top