你的位置:首页 > 软件开发 > 网页设计 > CSS3 按钮特效(一)

CSS3 按钮特效(一)

发布时间:2017-12-09 05:00:10
1. 实例 2.HTML 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3- ...

1. 实例

 CSS3 按钮特效(一)

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. 练习

CSS3 按钮特效(一)

区别只是 heigth属性所设置的高度大小

原标题:CSS3 按钮特效(一)

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。