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教程》
Atas ialah kandungan terperinci CSS3 实现响应式手风琴. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1359
52
Tutorial menggunakan CSS untuk melaksanakan kesan karusel automatik imej responsif
Nov 21, 2023 am 08:37 AM
Dengan populariti peranti mudah alih, reka bentuk web perlu mengambil kira faktor seperti resolusi peranti dan saiz skrin terminal yang berbeza untuk mencapai pengalaman pengguna yang baik. Apabila melaksanakan reka bentuk responsif tapak web, selalunya perlu menggunakan kesan karusel imej untuk memaparkan kandungan berbilang imej dalam tetingkap visual yang terhad, dan pada masa yang sama, ia juga boleh meningkatkan kesan visual tapak web. Artikel ini akan memperkenalkan cara menggunakan CSS untuk mencapai kesan karusel automatik imej responsif dan memberikan contoh dan analisis kod. Idea pelaksanaan Pelaksanaan karusel imej responsif boleh dilaksanakan melalui reka letak fleksibel CSS. wujud
Tutorial melaksanakan menu gelongsor responsif menggunakan CSS
Nov 21, 2023 am 08:08 AM
Tutorial menggunakan CSS untuk melaksanakan menu gelongsor responsif memerlukan contoh kod khusus Dalam reka bentuk web moden, reka bentuk responsif telah menjadi kemahiran penting. Untuk menampung peranti dan saiz skrin yang berbeza, kami perlu menambah menu responsif pada tapak web. Hari ini, kami akan menggunakan CSS untuk melaksanakan menu gelongsor responsif dan memberikan anda contoh kod khusus. Pertama, mari kita lihat pelaksanaannya. Kami akan mencipta bar navigasi yang runtuh secara automatik apabila lebar skrin lebih kecil daripada ambang tertentu dan mengembang dengan mengklik butang menu.
Bagaimana untuk mencipta awan tag responsif menggunakan HTML, CSS dan jQuery
Oct 27, 2023 am 10:46 AM
Cara menggunakan HTML, CSS dan jQuery untuk mencipta awan teg responsif Awan teg ialah elemen web biasa yang digunakan untuk memaparkan pelbagai kata kunci atau teg. Ia biasanya memaparkan kepentingan kata kunci dalam saiz atau warna fon yang berbeza. Dalam artikel ini, kami akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk mencipta awan teg responsif, dan memberikan contoh kod khusus. Mencipta Struktur HTML Mula-mula, kita perlu mencipta struktur asas awan teg dalam HTML. Anda boleh menggunakan senarai tidak tersusun untuk mewakili teg
Cara membuat susun atur karusel responsif menggunakan HTML dan CSS
Oct 20, 2023 pm 04:24 PM
Cara membuat reka letak karusel responsif menggunakan HTML dan CSS Karusel ialah elemen biasa dalam reka bentuk web moden. Ia boleh menarik perhatian pengguna, memaparkan berbilang kandungan atau imej, dan bertukar secara automatik. Dalam artikel ini, kami akan memperkenalkan cara membuat reka letak karusel responsif menggunakan HTML dan CSS. Pertama, kita perlu mencipta struktur HTML asas dan menambah gaya CSS yang diperlukan. Berikut ialah struktur HTML ringkas: <!DOCTYPEhtml&g
Cara menggunakan JavaFX untuk membina antara muka UI responsif dalam Java 9
Jul 30, 2023 pm 06:36 PM
Cara menggunakan JavaFX untuk membina antara muka UI responsif dalam Java9 Pengenalan: Dalam proses pembangunan aplikasi komputer, antara muka pengguna (UI) adalah bahagian yang sangat penting. UI yang baik boleh meningkatkan pengalaman pengguna dan menjadikan aplikasi lebih menarik. JavaFX ialah rangka kerja antara muka pengguna grafik (GUI) pada platform Java Ia menyediakan set alat dan API yang kaya untuk membina antara muka UI interaktif dengan cepat. Dalam Java 9, JavaFX telah menjadi JavaSE
Cara membuat bar pemberitahuan skrol responsif menggunakan HTML, CSS dan jQuery
Oct 26, 2023 pm 12:12 PM
Cara menggunakan HTML, CSS dan jQuery untuk mencipta bar pemberitahuan skrol responsif Dengan populariti peranti mudah alih dan peningkatan dalam keperluan pengguna untuk pengalaman akses laman web, mereka bentuk bar pemberitahuan skrol responsif telah menjadi lebih penting. Reka bentuk responsif memastikan tapak web dipaparkan dengan betul pada peranti yang berbeza dan pengguna boleh melihat kandungan pemberitahuan dengan mudah. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk mencipta bar pemberitahuan skrol responsif dan memberikan contoh kod khusus. Mula-mula kita perlu mencipta HTM
Cara menggunakan Layui untuk melaksanakan fungsi kalendar responsif
Oct 25, 2023 pm 12:06 PM
Cara menggunakan Layui untuk melaksanakan fungsi kalendar responsif 1. Pengenalan Dalam pembangunan web, fungsi kalendar adalah salah satu keperluan biasa. Layui ialah rangka kerja bahagian hadapan yang sangat baik yang menyediakan banyak komponen UI, termasuk komponen kalendar. Artikel ini akan memperkenalkan cara menggunakan Layui untuk melaksanakan fungsi kalendar responsif dan memberikan contoh kod khusus. 2. Struktur HTML Untuk melaksanakan fungsi kalendar, pertama sekali kita perlu mencipta struktur HTML yang sesuai. Anda boleh menggunakan elemen div sebagai bekas paling luar, dan kemudian di dalamnya
Kaedah pelaksanaan komponen kotak lipat/akordion dalam dokumen Vue
Jun 20, 2023 am 09:52 AM
Sebagai rangka kerja JavaScript yang popular, Vue menyediakan banyak komponen dan fungsi yang memudahkan pembangunan. Satu komponen UI biasa ialah akordion (juga dipanggil akordion), yang membolehkan pengguna mengembangkan dan meruntuhkan kandungan untuk menjimatkan ruang. Dalam dokumentasi Vue, kita boleh menemui komponen kotak lipat yang ringkas tetapi berfungsi penuh Mari kita perkenalkan kaedah pelaksanaannya. Pertama, dalam komponen Vue, kita perlu menentukan beberapa data untuk mengawal keadaan kotak lipatan yang diperluas. Data ini boleh menjadi nilai boolean, seperti isColla
