CSS3 实现响应式手风琴
最近看了国外大佬用CSS3实现手风琴效果的视频,所以自己学习后写了一下,以博客的形式记录下来,方便自己日后复习,代码结构如下(字体用的是Genericons ):
视屏教程推荐：《CSS视频教程-玉女心经版》
最终效果如下:
全屏时:
屏幕宽度小于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>
<p class="container">
<!--标题-->
<header>
<h1>Follow me on social media</h1>
</header>
<!--手风琴部分-->
<ul class="accordion">
<li class="tab">
<p class="social youtube">
<a href="#">YouTube</a>
</p>
<p class="content">
<h1>YouTube</h1>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit.Culpa, consectetur.</p>
</p>
</li>
<li class="tab">
<p class="social facebook">
<a href="#">Facebook</a>
</p>
<p class="content">
<h1>Facebook</h1>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit.Culpa, consectetur.</p>
</p>
</li>
<li class="tab">
<p class="social twitter">
<a href="#">Twitter</a>
</p>
<p class="content">
<h1>Twitter</h1>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit.Culpa, consectetur.</p>
</p>
</li>
<li class="tab">
<p class="social instagram">
<a href="#">Instagram</a>
</p>
<p class="content">
<h1>Instagram</h1>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit.Culpa, consectetur.</p>
</p>
</li>
<li class="tab">
<p class="social linkedin">
<a href="#">Linkedin</a>
</p>
<p class="content">
<h1>Linkedin</h1>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit.Culpa, consectetur.</p>
</p>
</li>
<li class="tab">
<p class="social github">
<a href="#">Github</a>
</p>
<p class="content">
<h1>Github</h1>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit.Culpa, consectetur.</p>
</p>
</li>
</ul>
</p>
</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;
}
/*注意这里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;
}
}推荐教程：《CSS教程》
以上是CSS3 实现响应式手风琴的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
使用CSS实现响应式图片自动轮播效果的教程
Nov 21, 2023 am 08:37 AM
随着移动设备的普及，网页设计需要考虑到不同终端的设备分辨率和屏幕尺寸等因素，以实现良好的用户体验。在实现网站的响应式设计时，常常需要使用到图片轮播效果，以展示多张图片在有限的可视窗口中的内容，同时也能够增强网站的视觉效果。本文将介绍如何使用CSS实现响应式图片自动轮播效果，并提供代码示例和解析。实现思路响应式图片轮播的实现可以通过CSS的flex布局实现。在
使用CSS实现响应式滑动菜单的教程
Nov 21, 2023 am 08:08 AM
使用CSS实现响应式滑动菜单的教程，需要具体代码示例在现代网页设计中，响应式设计成为了一个必备的技能。为了适应不同的设备和屏幕尺寸，我们需要为网站添加一个响应式菜单。今天，我们将使用CSS来实现一个响应式的滑动菜单，并为您提供具体的代码示例。首先，让我们来看一下实现效果。我们将创建一个导航栏，当屏幕宽度小于一定阈值时，会自动折叠起来，并通过点击菜单按钮展开。
如何使用HTML、CSS和jQuery制作一个响应式的标签云
Oct 27, 2023 am 10:46 AM
如何使用HTML、CSS和jQuery制作一个响应式的标签云标签云是一种常见的网页元素，用于展示各种关键词或标签。它通常以不同的字体大小或颜色展示关键词的重要程度。在本文中，将介绍如何使用HTML、CSS和jQuery来制作一个响应式的标签云，并给出具体的代码示例。创建HTML结构首先，我们需要在HTML中创建标签云的基本结构。可以使用一个无序列表来表示标签
如何在Java 9中使用JavaFX来构建响应式UI界面
Jul 30, 2023 pm 06:36 PM
如何在Java9中使用JavaFX来构建响应式UI界面引言：在计算机应用程序的开发过程中，用户界面（UI）是非常重要的一部分。一个好的UI能够提升用户体验，使应用程序更具吸引力。JavaFX是Java平台上的一个图形用户界面（GUI）框架，它提供了一套丰富的工具和API来快速构建富有交互性的UI界面。在Java9中，JavaFX已经成为了JavaSE的
如何使用HTML和CSS创建一个响应式轮播图布局
Oct 20, 2023 pm 04:24 PM
如何使用HTML和CSS创建一个响应式轮播图布局在现代的网页设计中，轮播图是一个常见的元素。它能够吸引用户的注意力，展示多个内容或图片，并且能够自动切换。在本文中，我们将介绍如何使用HTML和CSS创建一个响应式的轮播图布局。首先，我们需要创建一个基本的HTML结构，并添加所需的CSS样式。以下是一个简单的HTML结构：<!DOCTYPEhtml&g
如何使用HTML、CSS和jQuery制作一个响应式的滚动通知栏
Oct 26, 2023 pm 12:12 PM
如何使用HTML、CSS和jQuery制作一个响应式的滚动通知栏随着移动设备的普及和用户对网站访问体验要求的提高，设计一个响应式的滚动通知栏变得越来越重要。响应式设计可以确保网站在不同设备上都能正常显示，并且用户可以方便地查看通知内容。本文将介绍如何使用HTML、CSS和jQuery来制作一个响应式的滚动通知栏，并提供具体的代码示例。首先，我们需要创建HTM
如何利用Layui实现响应式的日历功能
Oct 25, 2023 pm 12:06 PM
如何利用Layui实现响应式的日历功能一、介绍在Web开发中，日历功能是常见的需求之一。Layui是一款优秀的前端框架，它提供了丰富的UI组件，其中也包含了日历组件。本文将介绍如何利用Layui实现一个响应式的日历功能，并给出具体的代码示例。二、HTML结构为了实现日历功能，我们首先需要创建一个合适的HTML结构。可以使用div元素作为最外层容器，然后在其中
Vue文档中的折叠框/手风琴组件实现方法
Jun 20, 2023 am 09:52 AM
Vue作为一个流行的JavaScript框架，提供了许多方便开发的组件和功能。其中一个常见的UI组件是折叠框（也叫手风琴），它允许用户展开和收起内容以节省空间。在Vue文档中，我们可以找到一个简单但功能齐全的折叠框组件，下面就来介绍一下它的实现方法。首先，在Vue组件中，我们需要定义一些数据来控制折叠框的展开状态。这个数据可以是一个布尔值，例如isColla
