HTML+CSS：展开动画

效果演示

实现了一个网页上的图标悬浮效果，当鼠标悬浮在图标上时，会出现一个带有文字的悬浮框，文字内容为“打开微信”、“打开抖音”、“打开WeGame”或“打开STEAM”，字体大小和颜色会随着鼠标移动而变化。当鼠标悬浮在图标上时，悬浮框的背景颜色会变成灰色。

Code

<div class="item">
    <div><span class="iconfont icon-weixin">span>div>
div>
<div class="item">
    <div><span class="iconfont icon-douyin">span>div>
div>
<div class="item">
    <div><span class="iconfont icon-wegame">span>div>
div>
<div class="item">
    <div><span class="iconfont icon-steam">span>div>
div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #e8e8e8;
    overflow: hidden;
}

.item {
    display: inline-flex;
    align-items: center;
    height: 60px;
    width: 60px;
    margin: 4px 8px;
    overflow: hidden;
    background: #fff;
    border-radius: 30px;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.24);
    transition: all 0.5s;
}

.item:hover {
    width: 180px;
    border: none;
}

.item:hover div {
    background-color: #e9e9e9;
}

.item:hover:nth-child(1) div span {
    color: #25d366;
}

.item:hover:nth-child(2) div span {
    color: #f00;
}

.item:hover:nth-child(3) div span {
    color: orange;
}

.item:hover:nth-child(4) div span {
    color: #066093;
}

.item div {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    font-size: 28px;
    position: relative;
    transition: all 0.5s;
}

.item div span {
    font-size: 40px;
}

.item:nth-child(2) div span {
    font-size: 35px;
}

.item div::after {
    position: absolute;
    width: fit-content;
    word-break: keep-all;
    font-size: medium;
    left: 72px;
    pointer-events: auto;
    cursor: pointer;
}

.item:nth-child(1) div::after {
    content: "打开WeChat";
}

.item:nth-child(2) div::after {
    content: '打开抖音';
}

.item:nth-child(3) div::after {
    content: '打开WeGame';
}

.item:nth-child(4) div::after {
    content: '打开STEAM';
}

.item div:hover::after {
    color: cadetblue;
}

实现思路拆分

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

这段代码是设置全局样式，将所有元素的外边距、内边距和盒模型设置为0，以便更好地控制元素的大小和位置。

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #e8e8e8;
  overflow: hidden;
}

这段代码是设置页面的基本样式，包括高度、水平居中、垂直居中、垂直方向为列、背景颜色和溢出隐藏。

.item {
  display: inline-flex;
  align-items: center;
  height: 60px;
  width: 60px;
  margin: 4px 8px;
  overflow: hidden;
  background: #fff;
  border-radius: 30px;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.24);
  transition: all 0.5s;
}

这段代码是设置图标的基本样式，包括内联块级元素、垂直居中、高度、宽度、外边距、溢出隐藏、背景颜色、圆角边框、阴影和过渡效果。

.item:hover {
  width: 180px;
  border: none;
}

这段代码是设置鼠标悬浮在图标上时的样式，包括将宽度增加到180px，并去掉边框。

.item:hover div {
  background-color: #e9e9e9;
}

这段代码是设置鼠标悬浮在图标上时，悬浮框的背景颜色变成灰色。

.item:hover:nth-child(1) div span {
  color: #25d366;
}

这段代码是设置鼠标悬浮在第一个图标上时，字体颜色变成绿色。

.item:hover:nth-child(2) div span {
  color: #f00;
}

这段代码是设置鼠标悬浮在第二个图标上时，字体颜色变成红色。

.item:hover:nth-child(3) div span {
  color: orange;
}

这段代码是设置鼠标悬浮在第三个图标上时，字体颜色变成橙色。

.item:hover:nth-child(4) div span {
  color: #066093;
}

这段代码是设置鼠标悬浮在第四个图标上时，字体颜色变成深蓝色。

.item div {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  font-size: 28px;
  position: relative;
  transition: all 0.5s;
}

这段代码是设置图标内的文字的基本样式，包括宽度、高度、内联块级元素、垂直居中、水平居中、字体大小、相对定位和过渡效果。

.item div span {
  font-size: 40px;
}

这段代码是设置图标内的文字的字体大小为40px。

.item:nth-child(2) div span {
  font-size: 35px;
}

这段代码是设置第二个图标内的文字的字体大小为35px。

.item div::after {
  position: absolute;
  width: fit-content;
  word-break: keep-all;
  font-size: medium;
  left: 72px;
  pointer-events: auto;
  cursor: pointer;
}

这段代码是设置图标内的伪元素的基本样式，包括绝对定位、宽度根据内容自适应、自动换行、字体大小为中等、左侧距离为72px、可点击和鼠标指针变成手型。

.item:nth-child(1) div::after {
  content: "打开WeChat";
}

这段代码是设置第一个图标内的伪元素的内容为“打开WeChat”。

.item:nth-child(2) div::after {
  content: '打开抖音';
}

这段代码是设置第二个图标内的伪元素的内容为“打开抖音”。

.item:nth-child(3) div::after {
  content: '打开WeGame';
}

这段代码是设置第三个图标内的伪元素的内容为“打开WeGame”。

.item:nth-child(4) div::after {
  content: '打开STEAM';
}

这段代码是设置第四个图标内的伪元素的内容为“打开STEAM”。

.item div:hover::after {
  color: cadetblue;
}

这段代码是设置鼠标悬浮在图标上时，伪元素的字体颜色变成深蓝色。