个回答

• 慕运维4918896

  2016-10-27 16:20:07

  <div class="containt">
  <div class="head">
  <input type="radio" name="sub_nav" id="sub1" checked="checked"><a href="#navct1">SUNDAY</a>
  <input type="radio" name="sub_nav" id="sub2"><a href="#navct2">FRIDAY</a>
  <input type="radio" name="sub_nav" id="sub3"><a href="#navct3">MONDAY</a>
  <input type="radio" name="sub_nav" id="sub4"><a href="#navct4">SATARDAY</a>
  <input type="radio" name="sub_nav" id="sub5"><a href="#navct5">febraday</a>
         </div>
         <div class="panelct">
         <section class="panel" id="navct1">内容一11111111111</section>
         <section class="panel" id="navct2">内容二2222222222222222222</section>
         <section class="panel" id="navct3">内容三3333333333333</section>
         <section class="panel" id="navct4">内容四444444444444</section>
         <section class="panel" id="navct5">内容五55555555555555</section>
         </div>
  

  </div>

  
  

  body,div,input,a{padding: 0;margin: 0}

  body{

  font-size: 15px;

  font-weight: 400;

  color: #333;

  overflow: hidden;

  font-smoothing:antialiased;

  
  

  }

  body,html{

  height: 100%;

  width: 100%

  }

  .containt{

  width: 100%;

  height: 100%;

  }

  .head{

  width: 100%;

  }

  .head > input,.head >a{

  width: 20%;

  height: 40px;

  line-height: 40px;

  position: fixed;

  bottom: 0;

  text-align: center;

  cursor: pointer

  }

  .head > input{

  z-index: 99;

  opacity: 0;

  position: absolute;

  bottom: 0;

  
  

  }

  .head > a{

      position: absolute;

  bottom: 0;

  z-index: 10;

  font-size: 20px;

  line-height: 40px;

  background: #e23a6e;

  text-decoration: none;

  color:#fff;

  font-weight: 700;

  text-shadow: 1px 1px 1px rgba(151,24,64,0.2)

  }

  #sub1,#sub1+a{

     left: 0%;

  }

  #sub2,#sub2+a{

  left: 20%;

  }

  #sub3,#sub3+a{

  left: 40%;

  }

  #sub4,#sub4+a{

  left: 60%;

  }

  #sub5,#sub5+a{

  left: 80%;

  }

  .head input:checked + a{

  background: #821134

  }

  /*动态生成小三角*/

  .head input:checked + a:after{

  content: "";

  height: 0;

  width: 0;

  overflow: hidden;

  border: 20px solid transparent;

  border-bottom-color:#821134; 

  position: absolute;

  bottom:100%;

  left: 50%;

  margin-left: -20px

  }

  .panelct,.panel{

      width: 100%;

      height: 100%;

      position: relative;

  }

  .panelct{

  left: 0;

  top:0;

  -webkit-transform: translate3d(0,0,0);

  -moz-transform: translate3d(0,0,0);

  -o-transform: translate3d(0,0,0);

  -ms-transform: translate3d(0,0,0);

  transform: translate3d(0,0,0);

  -webkit-backface-visibility: hidden;

  -moz-backface-visibility: hidden;

  -ms-backface-visibility: hidden;

  backface-visibility: hidden;

  }

  .panel{

  background: #fff;

  overflow: hidden;

  }

  #sub1:checked ~ .panelct{

  -webkit-transform: translateY(0%);

  -moz-transform: translateY(0%);

  -o-transform: translateY(0%);

  -ms-transform: translateY(0%);

  transform: translateY(0%);

  }

  #sub2:checked ~ .panelct{

  -webkit-transform: translateY(-100%);

  -moz-transform: translateY(-100%);

  -o-transform: translateY(-100%);

  -ms-transform: translateY(-100%);

  transform: translateY(-100%);

  }

  #sub3:checked ~ .panelct{

  -webkit-transform: translateY(-200%);

  -moz-transform: translateY(-200%);

  -o-transform: translateY(-200%);

  -ms-transform: translateY(-200%);

  transform: translateY(-200%);

  }

  #sub4:checked ~ .panelct{

  -webkit-transform: translateY(-300%);

  -moz-transform: translateY(-300%);

  -o-transform: translateY(-300%);

  -ms-transform: translateY(-300%);

  transform: translateY(-300%);

  }

  #sub5:checked ~ .panelct{

  -webkit-transform: translateY(-400%);

  -moz-transform: translateY(-400%);

  -o-transform: translateY(-400%);

  -ms-transform: translateY(-400%);

  transform: translateY(-400%);

  }

  
  

  0

• yaoxtao

  2016-10-27 14:27:46

  代码了？？
  

  0