实用垂直选项卡js特效制作

2019-09-11 郑州网站建设  

<!doctype html>

<html lang="zh">

<head>

         <meta charset="UTF-8">

         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

         <meta name="viewport" content="width=device-width, initial-scale=1.0">

         <title>实用垂直选项卡js特效</title>

         <meta name="keywords" content="实用,垂直选项卡,js特效" />

         <meta name="description" content="实用垂直选项卡js特效。" />

         <link rel="stylesheet" type="text/css" href=http://www.divcss5.com/html5/"css/normalize.css" />

         <link rel="stylesheet" type="text/css" href=http://www.divcss5.com/html5/"css/default.css">

        

         <style type="text/css">

         html, body {

           margin: 0;

           padding: 0;

           width: 100%;

           /*height: 100%;*/

           background-color: #eee;

           font-family: 'Raleway';

         }

 

         ul, li {

           margin: 0;

           padding: 0;

           list-style: none;

         }

 

         .icon {

           position: relative;

           width: 32px;

           height: 32px;

           display: block;

           fill: rgba(51, 51, 51, 0.5);

           margin-right: 20px;

           -webkit-transition: all .2s ease-out;

                   transition: all .2s ease-out;

         }

 

         .icon.active {

           fill: #E74C3C;

         }

 

         .icon.big {

           width: 64px;

           height: 64px;

           fill: rgba(51, 51, 51, 0.5);

         }

 

         #wrapper {

           width: 900px;

           height: 400px;

           position: absolute;

           top: 0;

           bottom: 0;

           left: 0;

           right: 0;

           margin: auto;

           background-color: #fff;

           box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

           display: -webkit-box;

           display: -webkit-flex;

           display: -ms-flexbox;

           display: flex;

           -webkit-box-align: center;

           -webkit-align-items: center;

               -ms-flex-align: center;

                   align-items: center;

           -webkit-box-pack: left;

           -webkit-justify-content: left;

               -ms-flex-pack: left;

                   justify-content: left;

           overflow: hidden;

         }

 

         #left-side {

           height: 70%;

           width: 25%;

           display: -webkit-box;

           display: -webkit-flex;

           display: -ms-flexbox;

           display: flex;

           -webkit-box-align: center;

           -webkit-align-items: center;

               -ms-flex-align: center;

                   align-items: center;

           -webkit-box-pack: center;

           -webkit-justify-content: center;

               -ms-flex-pack: center;

                   justify-content: center;

         }

         #left-side ul li {

           padding-top: 10px;

           padding-bottom: 10px;

           display: -webkit-box;

           display: -webkit-flex;

           display: -ms-flexbox;

           display: flex;

           line-height: 34px;

           color: rgba(51, 51, 51, 0.5);

           font-weight: 500;

           cursor: pointer;

           -webkit-transition: all .2s ease-out;

                   transition: all .2s ease-out;

         }

         #left-side ul li:hover {

           color: #333333;

           -webkit-transition: all .2s ease-out;

                   transition: all .2s ease-out;

         }

         #left-side ul li:hover > .icon {

           fill: #333;

         }

         #left-side ul li.active {

           color: #333333;

         }

         #left-side ul li.active:hover > .icon {

           fill: #E74C3C;

         }

 

         #border {

           height: 288px;

           width: 1px;

           background-color: rgba(51, 51, 51, 0.2);

         }

         #border #line.one {

           width: 5px;

           height: 54px;

           background-color: #E74C3C;

           margin-left: -2px;

           margin-top: 35px;

           -webkit-transition: all .4s ease-in-out;

                   transition: all .4s ease-in-out;

         }

         #border #line.two {

           width: 5px;

           height: 54px;

           background-color: #E74C3C;

           margin-left: -2px;

           margin-top: 89px;

           -webkit-transition: all .4s ease-in-out;

                   transition: all .4s ease-in-out;

         }

         #border #line.three {

           width: 5px;

           height: 54px;

           background-color: #E74C3C;

           margin-left: -2px;

           margin-top: 143px;

           -webkit-transition: all .4s ease-in-out;

                   transition: all .4s ease-in-out;

         }

         #border #line.four {

           width: 5px;

           height: 54px;

           background-color: #E74C3C;

           margin-left: -2px;

           margin-top: 197px;

           -webkit-transition: all .4s ease-in-out;

                   transition: all .4s ease-in-out;

         }

 

         #right-side {

           height: 300px;

           width: 75%;

           overflow: hidden;

         }

         #right-side #first, #right-side #second, #right-side #third, #right-side #fourth {

           position: absolute;

           height: 300px;

           width: 75%;

           -webkit-transition: all .6s ease-in-out;

                   transition: all .6s ease-in-out;

           margin-top: -350px;

           opacity: 0;

           display: -webkit-box;

           display: -webkit-flex;

           display: -ms-flexbox;

           display: flex;

           -webkit-box-align: center;

           -webkit-align-items: center;

               -ms-flex-align: center;

                   align-items: center;

           -webkit-box-pack: center;

           -webkit-justify-content: center;

               -ms-flex-pack: center;

                   justify-content: center;

           -webkit-box-orient: vertical;

           -webkit-box-direction: normal;

           -webkit-flex-direction: column;

               -ms-flex-direction: column;

                   flex-direction: column;

         }

         #right-side #first h1, #right-side #second h1, #right-side #third h1, #right-side #fourth h1 {

           font-weight: 800;

           color: #333;

         }

         #right-side #first p, #right-side #second p, #right-side #third p, #right-side #fourth p {

           color: #333;

           font-weight: 500;

           padding-left: 30px;

           padding-right: 30px;

         }

         #right-side #first.active, #right-side #second.active, #right-side #third.active, #right-side #fourth.active {

           margin-top: 0px;

           opacity: 1;

           -webkit-transition: all .6s ease-in-out;

                   transition: all .6s ease-in-out;

         }

         </style>

         <!--[if IE]>


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1964.html转载请标明出处,谢谢合作!
标签:
  • HTML
  • Doctype
  • lang
  • JS
  • !
  • Ч