CSS3实现相应式手风琴

发布时间：09/01 来源：未知浏览：关键词：

这篇文章主要介绍了详解CSS3实现相应式手风琴结果，文中通过示例代码介绍的非常细致，对大家的学习或者工作拥有一定的参照学习价值，需要的伴侣们下面随着小编来一起学习学习吧！

Document

Follow me on social media

YouTube

YouTube

Lorem ipsum dolor sit amet consectetur adipisicing elit.Culpa, consectetur.
Facebook

Facebook

Lorem ipsum dolor sit amet consectetur adipisicing elit.Culpa, consectetur.
Twitter

Twitter

Lorem ipsum dolor sit amet consectetur adipisicing elit.Culpa, consectetur.
Instagram

Instagram

Lorem ipsum dolor sit amet consectetur adipisicing elit.Culpa, consectetur.
Linkedin

Linkedin

Lorem ipsum dolor sit amet consectetur adipisicing elit.Culpa, consectetur.
Github

Github

Lorem ipsum dolor sit amet consectetur adipisicing elit.Culpa, consectetur.

样式(style.css):

*{
  margin: 0;
  padding: 0;
  border: none;
}

body{
  font-family: Arial, Helvetica, sans-serif;
  background-color: #222;
  color: #fff;
}

/*设定字体,由于背面的图标需要用到*/
@font-face {
  font-family: 'Genericons';
  src: url('font/genericons-regular-webfont.woff') format('woff'),
  url('font/genericons-regular-webfont.eot') format('truetype');
}

/*设定外面庞器的宽度*/
.container{
  width: 80%;
  margin: 20px auto;
}

header h1{
  font-size: 2rem;
  padding: 1rem;
  text-align: center;
}

/*注意这里font-size设定为0,否则会涌现非常糟糕的画面,我们背面再去独自对需要实际的文本设定字体大小
,由于a链接不想让它显示内容*/
.accordion{
  width: 100%;
  min-width: 800px;
  height: 200px;
  background-color: #333;
  list-style: none;
  display: block;
  overflow: hidden;
  font-size: 0;
}

/*对每一个li设定为inline-block,让其罗列在一行,溢出隐蔽,由于.tab下面的.content宽度为360,并且.tab只要在hover的时候宽度才会酿成450px,那时候.content恰好显示.别的设定过渡,使其宽度增长的历程平缓*/
.tab{
  width: 80px;
  height: 100%;
  display: inline-block;
  position: relative;
  margin: 0;
  background-color: #444;
  border: 1px solid #333;
  overflow: hidden;
  transition: all .5s ease .1s;
}

.tab:hover{
  width: 450px;
}
.tab:hover .social a:after{
  transform: translateX(-80px);
}
.tab:hover .social a:before{
  transform: translateX(-100px);
}

/*设定定位为相对定位,否则.content会有局部内容被遮住*/
.tab .content{
  position: relative;
  width: 360px;
  height: 100%;
  background-color: #fff;
  color: #333;
  margin-left: 80px;
  padding: 50px 0 0 15px;
}

.tab .content h1{
  font-size: 2.5rem;
  margin-top: 20px;
}
.tab .content p{
  font-size: .85rem;
  line-height: 1.6;
}

/设定为元素的宽高及字体为Genericons,否则图标没法显露,只会显示白色的空框框/
.social a:before,
.social a:after{
  position: absolute;
  width: 80px;
  height: 200px;
  display: block;
  text-indent: 0;
  padding-top: 90px;
  padding-left: 25px;
  font:normal 30px Genericons;
  color: #fff;
  transition: all .5s ease;
}

/*由于当我们hover上去的时候图标会更大,所以after伪类的字体及padding要从新设定,同时
要将margin-left设定为80px,这要默许状况下显示的就是before伪类的小图标*/
.social a:after{
  font-size: 48px;
  padding-top: 80px;
  padding-left: 20px;
  margin-left: 80px;
}

/*Add icons*/
.youtube a:before,
.youtube a:after{
  content: '\f213';
}

.youtube a:after{
  background-color: #fc0000;
}

.twitter a:before,
.twitter a:after{
  content: '\f202';
}

.twitter a:after{
  background-color: #6dc5dd;
}

.facebook a:before,
.facebook a:after{
  content: '\f204';
}

.facebook a:after{
  background-color: #3b5998;
}

.linkedin a:before,
.linkedin a:after{
  content: '\f208';
}

.linkedin a:after{
  background-color: #00a9cd;
}

.instagram a:before,
.instagram a:after{
  content: '\f215';
}

.instagram a:after{
  background-color: #6dc993;
}

.github a:before,
.github a:after{
  content: '\f200';
}

.github a:after{
  background-color: #6e5494;
}

/*当屏幕最大宽度为960px时*/
@media(max-width:960px){
  .container{
    width: 70%;
  }
    /*让高度为auto*/
  .accordion{
    min-width: 450px;
    height: auto;
  }

    /*让li显示为block,这样就会顺次往下排*/
  .tab{
    width: 100%;
    display: block;
    border-bottom: 1px solid #333;
  }
    /*这个一定要设定,由于原本的.tab:hover时宽度为450px,假设.tab的宽度有600px,在hover时就回剩余150px的空白,不是我们想要的结果*/
  .tab:hover{
    width: 100%;
  }
  .tab .content{
    width: 85%;
  }
    /*设定对应伪类的padding值,使其大约显示在中间*/
  .social a:before{
    padding-top: 60px;
    padding-left: 25px;
  }
  .social a:after{
    padding-top: 50px;
    padding-left: 20px;
  }
}