CSS手风琴图标展开动画（每日一个前端动画，附代码）

效果预览

HTML代码

<!-- 抽拉式图标展开 -->
    <!-- 整体背景 -->
    <div class="body">
    <!-- 第一个组件 -->
    <div class="item first">
        <div @click="clickAfter('红桃')" style="color: #DD3B32;" class="icon">♥</div>
    </div>
    <!-- 第二个组件 -->
    <div class="item second">
        <div @click="clickAfter('黑桃')" style="color: #1A1A1A;" class="icon">♠</div>
    </div>
    <!-- 第三个组件 -->
    <div class="item third">
        <div @click="clickAfter('方块')" style="color: #FB1C17;" class="icon">♦</div>
    </div>
    <!-- 第四个组件 -->
    <div class="item fouth">
        <div @click="clickAfter('梅花')" style="color: #090B0A;" class="icon">♣</div>
    </div>
    </div>

CSS代码 

/* 整体背景样式 */
.body {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 180px;
    background-color: #ddd;
}
.item {
    /* 确保了元素的宽度和高度 */
    box-sizing: border-box;
    /* 内联弹性盒子 */
    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);
    /* 为元素的所有属性变化设置了过渡效果，过渡时间为0.5秒 */
    transition: all 0.5s;
}
.item:hover {
    /* 手风琴效果就是鼠标悬浮宽度过渡 */
    width: 180px;
    border: none;
}
/* 悬浮加背景色 */
.first:hover .icon {
    background-color: pink;
}
.second:hover .icon {
    background-color: #e9e9e9;
}
.third:hover .icon {
    background-color: pink;
}
.fouth:hover .icon {
    background-color: #e9e9e9;
}
.icon {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    font-size: 28px;
    position: relative;
    transition: all 0.5s;
    pointer-events: none;
}
/**
    * 伪元素绑定事件
      真实元素阻止鼠标事件，伪元素自动鼠标事件
    * 真实元素 pointer-events: none;
    * 伪元素 pointer-events: auto;
* */
/* 通过伪元素添加内容介绍文字 */
.item:nth-child(1) .icon::after {
    position: absolute;
    content: '红桃来啦';
    /* 宽度随着内容自适应 */
    width: fit-content;
    /* 文字不换行 */
    word-break: keep-all;
    /* 设置伪元素文字大小为中等大小 */
    font-size: medium;
    left: 72px;
    /* 真实元素阻止鼠标事件，伪元素自动鼠标事件 */
    pointer-events: auto;
    cursor: pointer;
}
.item:nth-child(2) .icon::after {
    position: absolute;
    content: '黑桃来啦';
    width: fit-content;
    word-break: keep-all;
    font-size: medium;
    left: 72px;
    pointer-events: auto;
    cursor: pointer;
}
.item:nth-child(3) .icon::after {
    position: absolute;
    content: '方块来啦';
    width: fit-content;
    word-break: keep-all;
    font-size: medium;
    left: 72px;
    pointer-events: auto;
    cursor: pointer;
}
.item:nth-child(4) .icon::after {
    position: absolute;
    content: '梅花来啦';
    width: fit-content;
    word-break: keep-all;
    font-size: medium;
    left: 72px;
    pointer-events: auto;
    cursor: pointer;
}

伪元素点击事件函数 

// 点击事件
function clickAfter(who) {
    console.log(who);
}

命是弱者的借口，运是强者的谦词。