详解CSS3实现响应式手风琴效果

最近看了国外大佬用CSS3实现手风琴效果的视频,所以自己学习后写了一下,以博客的形式记录下来,方便自己日后复习,代码结构如下(字体用的是Genericons ):

最终效果如下:

全屏时:

屏幕宽度小于960px时:

下面来看一下页面的基本结构(index.html):

  
  
  
  


  
      
    

      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;
}


.accordion{
  width: 100%;
  min-width: 800px;
  height: 200px;
  background-color: #333;
  list-style: none;
  display: block;
  overflow: hidden;
  font-size: 0;
}


.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);
}


.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;
}


.social a:after{
  font-size: 48px;
  padding-top: 80px;
  padding-left: 20px;
  margin-left: 80px;
}


.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;
}


@media(max-width:960px){
  .container{
    width: 70%;
  }
    
  .accordion{
    min-width: 450px;
    height: auto;
  }

    
  .tab{
    width: 100%;
    display: block;
    border-bottom: 1px solid #333;
  }
    
  .tab:hover{
    width: 100%;
  }
  .tab .content{
    width: 85%;
  }
    
  .social a:before{
    padding-top: 60px;
    padding-left: 25px;
  }
  .social a:after{
    padding-top: 50px;
    padding-left: 20px;
  }
}

到此这篇关于详解CSS3实现响应式手风琴效果的文章就介绍到这了,更多相关CSS3响应式手风琴内容请搜索考高分网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持考高分网！