纯css3实现的nav切换

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width = device-width,initial-scale=1" />
       <title></title>
       <style type="text/css">
           html,
           body,
           #big_box
           {
               width: 100%;
               height: 100%;
               font-size: 14px;
               margin: 0;
               padding: 0;
               overflow: hidden;
           }

           h2 {
               margin: 0;
               padding: 0;
               height: 100px;
               font-size: 25px;
               line-height: 100px;
           }
           #container{
               width: 100%;
               height: 100%;
               position: relative;
               margin: 0;
               padding: 0;
           }

           #container > input,#container > a{
               position: fixed;
               bottom: 0;
               width: 20%;
               height: 40px;
               line-height: 40px;
               text-align: center;
               font-size: 15px;
               color: white;
               background-color: red;
               cursor: pointer;
           }
           #container > input{
               z-index: 1000;
               opacity: 0;
           }
           #container > a{
               z-index: 10;
               text-decoration: none;
           }
           #container > input:hover + a{
               background-color: greenyellow;
           }

           #container > input:checked + a,#container > input:checked:hover + a{
               background-color: yellow;
           }


           #container > input:checked + a:after{
               content: "";
               position: absolute;
               bottom: 100%;
               left: 50%;
               transform: translateX(-50%);
               width: 0;
               height: 0;
               border: 40px solid transparent;
               border-bottom-color:yellow ;
           }
           #controlPage1,#controlPage1 + a{
               left: 0;
           }


           #controlPage2,#controlPage2 + a{
               left: 20%;
           }

           #controlPage3,#controlPage3 + a{
               left: 40%;
           }

           #controlPage4,#controlPage4 + a{
               left: 60%;
           }

           #controlPage5,#controlPage5 + a{
               left: 80%;
           }


           #scroll{
               left: 0;
               top: 0;
               width: 100%;
               height: 100%;
               /*transform: translate3d(0,0,0);*/
               -webkit-backface-visibility: hidden;
               transition: all 1s ease-in-out;
           }
           .sects{
               width: 100%;
               height: 100%;
               text-align: center;
               background: #fff;
               overflow: hidden;
           }

           #controlPage1:checked ~ #scroll{
               transform: translateY(0%);
           }

           #controlPage2:checked ~ #scroll{
               -webkit-transform: translateY(-100%);
           }

           #controlPage3:checked ~ #scroll{
               -webkit-transform: translateY(-200%);
           }

           #controlPage4:checked ~ #scroll{
               -webkit-transform: translateY(-300%);
           }

           #controlPage5:checked ~ #scroll{
               -webkit-transform: translateY(-400%);
           }


           #controlPage1:checked ~ #scroll #controlDetailPage1 h2{
               animation: downAndUp 1s ease-in-out forwards;
           }
           #controlPage1:checked ~ #scroll #controlDetailPage1 p{
               animation: sUp 1s ease-in-out forwards;
           }

           #controlPage2:checked ~ #scroll #controlDetailPage2 h2{
               animation: downAndUp 1s ease-in-out forwards;
           }
           #controlPage2:checked ~ #scroll #controlDetailPage2 p{
               animation: sUp 1s ease-in-out forwards;
           }

           #controlPage3:checked ~ #scroll #controlDetailPage3 h2{
               animation: downAndUp 1s ease-in-out forwards;
           }
           #controlPage3:checked ~ #scroll #controlDetailPage3 p{
               animation: sUp 1s ease-in-out forwards;
           }

           #controlPage4:checked ~ #scroll #controlDetailPage4 h2{
               animation: downAndUp 1s ease-in-out forwards;
           }
           #controlPage4:checked ~ #scroll #controlDetailPage4 p{
               animation: sUp 1s ease-in-out forwards;
           }

           #controlPage5:checked ~ #scroll #controlDetailPage5 h2{
               animation: downAndUp 1s ease-in-out forwards;
           }
           #controlPage5:checked ~ #scroll #controlDetailPage5 p{
               animation: sUp 1s ease-in-out forwards;
           }
           @keyframes downAndUp{
               from{
                   opacity: 0;
                   transform: translate3d(0,-10px,0);
               }
               to{
                   opacity: 1;
                   transform: translate3d(0,0,0);
               }
           }


           @keyframes sUp{
               from{
                   opacity: 0;
                   transform: translate3d(0,0,0);
               }
               to{
                   opacity: 1;
                   transform: translate3d(0,10px,0);
               }
           }
       </style>
   </head>

</div>
</body>

</html>

这个例子主要是借助了css 3中相邻兄弟选择器(+)以及后同辈选择器(~)同时借助radio单选框的checked来确定点击的是哪个nav从而改变该nav下的样式，达到js选择的相同效果但是总体还是没有js控制得那么细

纯css3实现的nav切换

猜你喜欢