CSS3模擬實現iphone返回按鈕效果

admin發表於2017-02-17
CSSS3iPhone

CSS3可以實現各種漂亮的效果，以前只有圖片可以實現的效果，現在CSS3實現起來難度也不是太高。

下面分享一段使用CSS3實現的iphone返回按鈕的效果，其實這種CSS3程式碼根本就不用分析，只要給出程式碼例項，自己就完全可以看明白，當然你要首先知道各個屬性的作用是什麼，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<style>
body {
  margin:0;
}
header{
  background:-moz-linear-gradient(top, #65bbce, #50b1c8);
  background:-webkit-linear-gradient(top, #65bbce, #50b1c8);
  background:-ms-linear-gradient(top, #65bbce, #50b1c8);
  filter:progid<img src="static/image/smiley/default/biggrin.gif" smilieid="3" border="0" alt="">XImageTransform.Microsoft.gradient(startColorstr='#65bbce', endColorstr='#50b1c8', GradientType='0');
  border-bottom:1px solid #348da7;
  height:50px;
  verflow:hidden;
}
 
.btn-back{
  font:14px/27px Arial,Helvetica,sans-serif;
  color:#fff;
  text-decoration:none;
  position:relative;
  display:block;
  float:left;
  margin:11px 0 0 10px;
}
.btn-back span{
  display:inline-block;
  font-size:13px;
  line-height:27px;
  height:27px;
  padding:0 10px 0 5px;
  background:-moz-linear-gradient(top, #5bbfd8, #449fb6);
  background:-webkit-linear-gradient(top, #5bbfd8, #449fb6);
  background:-ms-linear-gradient(top, #5bbfd8, #449fb6);
  filter:progid<img src="static/image/smiley/default/biggrin.gif" smilieid="3" border="0" alt="">XImageTransform.Microsoft.gradient(startColorstr='#5bbfd8', endColorstr='#449fb6', GradientType='0');
  border:1px solid #2c96b2;
  border-left:0;
  border-radius:2px 5px 5px 2px;
  text-shadow:0 -1px 0 rgba(0, 0, 0, .4);
  margin-left:12px;
  position:relative;
  z-index:2;
  box-shadow:0 1px 0 rgba(255, 255, 255, .3) inset, 1px 1px 1px rgba(255, 255, 255, .2);
}
.btn-back:before {
  content:'';
  display:inline-block;
  width:20px;
  height:20px;
  background:-moz-linear-gradient(-45deg, #5bbfd8, #449fb6);/*背景旋轉-45°*/
  background:-webkit-linear-gradient(-45deg, #5bbfd8, #449fb6);
  background:-ms-linear-gradient(-45deg, #5bbfd8, #449fb6);        
  border:1px solid #2c96b2;
  -webkit-transform-origin: 0 0;/*設定基點為0,0*/
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -webkit-transform: scaleX(0.8) rotate(45deg);/*X軸煙鎖，旋轉45°*/
  -moz-transform: scaleX(0.8) rotate(45deg);
  -ms-transform: scaleX(0.8) rotate(45deg);
  border-radius: 3px 2px;
  position: absolute;
  left:13px;
  top:-1px;
}
</style>
<body>
<header>
<a class="btn-back" href="#">
  <span>首頁</span>
</a>
</header>
</body>
</html>

相關文章