HTML

最新推荐文章于 2022-12-04 19:34:20 发布

子不言，吾语

最新推荐文章于 2022-12-04 19:34:20 发布

阅读量139

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_52683824/article/details/110849360

版权

笔记专栏收录该内容

27 篇文章 0 订阅

订阅专栏

HTML+CSS：滑动手风琴
效果一：当鼠标移动到图标上时，图片会响应所点处图标变大且变色，在其右侧会展示出文字

效果如下：

在这里插入图片描述

图标样式部分可在bootcdn中搜索genericons，使用引入

<link href="https://cdn.bootcdn.net/ajax/libs/genericons/3.1/genericons.css" rel="stylesheet">
HTML部分

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link href="https://cdn.bootcss.com/genericons/3.1/genericons.min.css" rel="stylesheet">

    <link rel="stylesheet" href="style.css">

    <title>Accordion Slider</title>

</head>

<body>

    <div class="container">

        <header>

            <h1>手风琴</h1>

        </header>

        <ul class="slider">

            <li class="tab">

                <div class="social youtube">

                    <a href="#">Youtube</a>

                </div>

                <div class="content">

                    <h1>YouTube</h1>

                    <p>content</p>

                </div>

            </li>

            <li class="tab">

                <div class="social titter">

                    <a href="#">Titter</a>

                </div>

                <div class="content">

                    <h1>Titter</h1>

                    <p>content<</p>

                </div>

            </li>

            <li class="tab">

                <div class="social facebook">

                    <a href="#">Facebook</a>

                </div>

                <div class="content">

                    <h1>Facebook</h1>

                    <p>content</p>

                </div>

            </li>

            <li class="tab">

                <div class="social linked">

                    <a href="#">Linked</a>

                </div>

                <div class="content">

                    <h1>Linked</h1>

                    <p>content</p>

                </div>

            </li>

            <li class="tab">

                <div class="social ins">

                    <a href="#">ins</a>

                </div>

                <div class="content">

                    <h1>Ins</h1>

                    <p>content</p>

                </div>

            </li>

            <li class="tab">

                <div class="social git">

                    <a href="#">Git</a>

                </div>

                <div class="content">

                    <h1>git</h1>

                    <p>content</p>

                </div>

            </li>

        </ul>

    </div>

</body>

</html>

HTML部分没什么好说的就是建立六个盒子
CSS部分


*{
    margin: 0;
    padding: 0;
    border: 0;
}
body{
    background-color: #222;
    font-family: Arial, Helvetica, sans-serif;
}

.container{
    margin: 50px auto;
    width: 90%;
}

header h1{
    color: #fff;
    margin-bottom: 10px;
    text-align: center;
}

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

.tab{
    display: inline-block;
    background-color: #444;
    border-right: #333 1px solid;
    width: 80px;
    height: 200px;
    overflow: hidden;
    position: relative;
    margin: 0;
    transition: all 0.5s ease-in-out 0.1s;
}

.tab:hover{
    width: 450px;
}

.tab:hover .social a::before{
    margin-left: -100px;
}

.tab:hover .social a::after{
    margin-left: -5px;
}
.tab .content{
    background: #fff;
    width: 360px;
    height: 200px;
    margin-left: 80px;
    padding: 50px 0 0 15px;
    position: relative;
}

.tab .content h1{
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.tab .content p{
    font-size: 0.85rem;
   line-height: 1.4rem;
   padding-right: 30px;
}

.social a::before,
.social a::after{
    width: 80px;
    height: 200px;
    position: absolute;
    text-indent: 0;
    padding-top: 90px;
    padding-left: 25px;
    display: block;
    font: normal 30px Genericons;
    color: #fff;
    transition: all 0.4s ease-in-out 0.1s;
}

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

.youtube a::before,
.youtube a::after{
    content: '\f213';
}
.youtube a::after{
    background-color: #ff0000;
}

.titter a::before,
.titter a::after{
    content: '\f202';
}
.titter a::after{
    background-color: #6dc5dd;
}

.facebook a::before,
.facebook a::after{
    content: '\f204';
}
.facebook a::after{
    background-color: #3b5998;
}

.linked a::before,
.linked a::after{
    content: '\f208';
}
.linked a::after{
    background-color: #00a9cd;
}

.ins a::before,
.ins a::after{
    content: '\f215';
}
.ins a::after{
    background-color: #6dc993;
}

.git a::before,
.git a::after{
    content: '\f200';
}
.git a::after{
    background-color: #6e5494;
}


/* media queries */
@media(max-width: 950px){
    .container{
        width: 70%;
    }
    .tab{
        display: block;
        width: 100%;
        border-bottom: 3px #333 solid;
    }
    .slider{
        display: block;
        height: auto;
        min-width: 450px;
    }

    .tab .content{
        width: 85%;
    }
    .tab:hover{
        width: 100%;
    }
}

@media(max-width: 680px) {
    .container{
        width: 95%;
    }

    .slider{
        width: 100%;
        min-width: 350px;
    }
}

设置页面的样式，背景颜色，大小

*{
    margin: 0;
    padding: 0;
    border: 0;
}
body{
    background-color: #222;
    font-family: Arial, Helvetica, sans-serif;
}
.container{
    margin: 50px auto;
    width: 90%;
}

overflow用于内容溢出元素框
transition用于使动画在页面中不会显得过于僵硬，起过渡作用。

.slider{
    background-color: #333;
    width: 100%;
    min-width: 800px;
    display: block;/*使其变成块元素*/
    list-style: none;
    overflow: hidden;/*内容会被修剪，溢出部分不显示*/
    height: 200px;
    font-size: 0;
}

.tab/*设置盒子属性*/{
    display: inline-block;
    background-color: #444;
    border-right: #333 1px solid;
    width: 80px;
    height: 200px;
    overflow: hidden;
    position: relative;
    margin: 0;
    transition: all 0.5s ease-in-out 0.1s;/*ease-in-out：以慢速开始和结束*/
}

设置before和after伪类，来达到鼠标移动到图标上时会出现隐藏其中的内容
效果如下在这里插入图片描述

.tab:hover{
    width: 450px;
}

.tab:hover .social a::before{
    margin-left: -100px;
}

.tab:hover .social a::after{
    margin-left: -5px;
}

依旧是利用before和after伪类，使鼠标移动到图标后产生效果
效果如下在这里插入图片描述

.social a::before,
.social a::after{
    width: 80px;
    height: 200px;
    position: absolute;
    text-indent: 0;
    padding-top: 90px;
    padding-left: 25px;
    display: block;
    font: normal 30px Genericons;
    color: #fff;
    transition: all 0.4s ease-in-out 0.1s;
   
}
.social a::after{
    font-size: 40px;
  padding-left: 20px;
  padding-top: 80px;
margin-left: 85px;
}

拿YouTube的举例子别的几个盒子原理与他一样
\f213为特定的图标编码下面的几个也是如\f202,\f204

.youtube a::before,
.youtube a::after{
    content: '\f213';

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

新部分：利用@media来设置当在不同屏幕宽度小于或大于某个值时展示出不一样的效果
效果如下：在这里插入图片描述

@media(max-width: 950px) /*用于实现不同大小页面下展示不一样的效果*/ {
	

.container{
    width: 70%;
}
.tab{
    display: block;
    width: 100%;
    border-bottom:3px  #333 solid;
}
.slider{
    display: block;
    height: auto;
    min-width: 450px;
}


.tab .content{
    width: 85%;
}

.tab:hover{
    width: 100%;
}
}

@media部分属性
max-height：输出设备中页面可见最大高度
max-hwidth：输出设备中页面可见最大宽度

至此一个简易的滑动手风琴效果就完成了

子不言，吾语

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
HTML

HTML+CSS：滑动手风琴效果一：当鼠标移动到图标上时，图片会响应所点处图标变大且变色，在其右侧会展示出文字效果如下：图标样式部分可在bootcdn中搜索genericons，使用引入<link href="https://cdn.bootcdn.net/ajax/libs/genericons/3.1/genericons.css" rel="stylesheet">HTML部分<!DOCTYPE html><html lang="en">&l
复制链接

扫一扫