css3實現的具有漸變效果的選項卡功能

admin發表於2017-02-20
CSSS3

選項卡功能通常都是由javascript來實現。

使用css3也是可以實現此功能的，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.tabs {
  position: relative;
  margin: 40px auto;
  width: 750px;
}
.label {
  display: inline-block;
  padding: 0 20px;
  height: 30px;
  line-height: 30px;
  background-color: #3d5ce4;
  color: #fff;
  position: relative;
}
.radio {
  width: 80px;
  height: 30px;
  position: absolute;
  left: 0;
  top: 0;
  float: left;
  opacity: 0;
  z-index: 1;
}
.radio-2 {
  left: 80px;
}
.radio-3 {
  left: 160px;
}
.center {
  margin-top: 5px;
  width: 500px;
  height: 400px;
  border: #666 1px solid;
  position: relative;
}
.center-1 {
  width: 500px;
  height: 400px;
  background-color: blue;
}
.center-2 {
  width: 500px;
  height: 400px;
  background-color: black;
}
.center-3 {
  width: 500px;
  height: 400px;
  background-color: red;
}
.center div {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  z-index: 1;
  -webkit-transition: opacity linear 0.5s;
  -moz-transition: opacity linear 0.5s;
  -o-transition: opacity linear 0.5s;
  transition: opacity linear 0.5s;
}
input:checked + label {
  background-color: #d69329;
}
 
input.radio-1:checked ~ .center .center-1,
input.radio-2:checked ~ .center .center-2,
input.radio-3:checked ~ .center .center-3 {
  z-index: 100;
  -ms-filter: "progid<img src="static/image/smiley/default/biggrin.gif" smilieid="3" border="0" alt="">XImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition: opacity ease-out 1s 0.5s;
  -moz-transition: opacity ease-out 1s 0.5s;
  -o-transition: opacity ease-out 1s 0.5s;
  transition: opacity ease-out 1s 0.5s;
}
</style>
</head>
<body>
<section class="tabs">
  <input type="radio" name="radio-set" id="tab-1" class="radio radio-1" checked="checked" />
  <label for="tab-1" class="label">藍色</label>
 
  <input type="radio" name="radio-set" id="tab-2" class="radio radio-2" />
  <label for="tab-2" class="label">黑色</label>
 
  <input type="radio" name="radio-set" id="tab-3" class="radio radio-3" />
  <label for="tab-3" class="label">紅色</label>
  <div class="center">
    <div class="center-1"></div>
    <div class="center-2"></div>
    <div class="center-3"></div>
  </div>
</section>
</body>
</html>

相關文章