HTML+CSS实现按钮手风琴效果 ｜ 青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第7天。

需求描述

实现一排居中的五个图标，默认为圆形图案，鼠标移动到图标后，图标像手风琴一样展开，显示颜色和文字。

HTML部分

引入css库：

      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
1
2

第一个是自定义的css，第二个是外部引用的组件库，提供fab fa-facebook-f等样式。

定义两层盒子，大盒子内包含5个小盒子，小盒子装图标。

      <div class="wrapper">
         <div class="button">
            <div class="icon">
               <i class="fab fa-facebook-f">i>
            div>
            <span>Facebookspan>
         div>
         <div class="button">
            <div class="icon">
               <i class="fab fa-twitter">i>
            div>
            <span>Twitterspan>
         div>
         <div class="button">
            <div class="icon">
               <i class="fab fa-instagram">i>
            div>
            <span>Instagramspan>
         div>
         <div class="button">
            <div class="icon">
               <i class="fab fa-github">i>
            div>
            <span>Githubspan>
         div>
         <div class="button">
            <div class="icon">
               <i class="fab fa-youtube">i>
            div>
            <span>YouTubespan>
         div>
      div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

CSS部分

首先导入google font的Poppins字体：

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
1
2
3
4
5
6
7

盒子居中显示，背景采用渐变色：

html,body{
  display: grid;
  height: 100%;
  width: 100%;
  place-items: center;
  background: linear-gradient(315deg, #ffffff 0%, #d7e1ec 74%);
}
1
2
3
4
5
6
7

定义两个盒子wrapper和button，设置hover宽度变化：

.wrapper .button{
  display: inline-block;
  height: 60px;
  width: 60px;
  float: left;
  margin: 0 5px;
  overflow: hidden;
  background: #fff;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease-out;
}
.wrapper .button:hover{
  width: 200px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

定义按钮颜色变化：

.wrapper .button:nth-child(1):hover .icon{
  background: #4267B2;
}
.wrapper .button:nth-child(2):hover .icon{
  background: #1DA1F2;
}
.wrapper .button:nth-child(3):hover .icon{
  background: #E1306C;
}
.wrapper .button:nth-child(4):hover .icon{
  background: #333;
}
.wrapper .button:nth-child(5):hover .icon{
  background: #ff0000;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

完整代码

Uestc-xiye/Buttons-with-Hover-Animation: HTML+CSS实现按钮手风琴效果 (github.com)

效果展示

鼠标放在Github图标上后，按钮展开：