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

时间：2021-05-08

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

最终效果如下:

全屏时:

屏幕宽度小于960px时:

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"></head><body> <div class="container"> <!--标题--> <header> <h1>Follow me on social media</h1> </header> <!--手风琴部分--> <ul class="accordion"> <li class="tab"> <div class="social youtube"> <a href="#">YouTube</a> </div> <div class="content"> <h1>YouTube</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Culpa, consectetur.</p> </div> </li> <li class="tab"> <div class="social facebook"> <a href="#">Facebook</a> </div> <div class="content"> <h1>Facebook</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Culpa, consectetur.</p> </div> </li> <li class="tab"> <div class="social twitter"> <a href="#">Twitter</a> </div> <div class="content"> <h1>Twitter</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Culpa, consectetur.</p> </div> </li> <li class="tab"> <div class="social instagram"> <a href="#">Instagram</a> </div> <div class="content"> <h1>Instagram</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Culpa, consectetur.</p> </div> </li> <li class="tab"> <div class="social linkedin"> <a href="#">Linkedin</a> </div> <div class="content"> <h1>Linkedin</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Culpa, consectetur.</p> </div> </li> <li class="tab"> <div class="social github"> <a href="#">Github</a> </div> <div class="content"> <h1>Github</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Culpa, consectetur.</p> </div> </li> </ul> </div></body></html>

样式(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响应式手风琴内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章