CSS学习案例（15）：图标展开效果

	<div class="container">
        <div class="tool">
            <span class="iconfont iconxiangji" id="#"></span>
            <span class="iconfont iconwendang" id="#"></span>
            <span class="iconfont iconqianbaoqiandaiyue" id="#"></span>
        </div>
        <div class="button"></div>
    </div>

JS部分
绑定点击事件：addEventListener
利用classList属性添加或移除类名：classList

		var buttonflag = 0;
        let container = document.querySelector('.container');
        container.addEventListener('click',function(){
            if(buttonflag == 0)
            {
                container.classList.remove('close');
                container.classList.add('open');
                buttonflag = 1;
            }
            else{
                container.classList.remove('open');
                container.classList.add('close');
                buttonflag = 0;
            }
        })  

CSS部分
当点击时，类名变为container open，open动画执行

.container.open .button{
    animation: anima_button_open .8s linear 1 both;
}
.container.open .tool{
    animation: anima_tool_open 1s linear 1 both;
}

再次点击，类名变为container close，close动画执行

.container.close .button{
    animation: anima_button_close 1s linear 1 both;
}
.container.close .tool{
    animation: anima_tool_close 1s linear 1 both;
}

全部代码：

*{margin: 0;padding: 0;}
body{
    height: 100vh;width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2c3e54;
}

.container{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container .button::before{
    content: '';
    position: absolute;
    width: 50%;height: 5px;
    background-color: #2c3e54;
    
}
.container .button::after{
    content: '';
    position: absolute;
    width: 5px;height: 50%;
    background-color: #2c3e54;
}

.container .button{
    width: 60px;height: 60px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container.open .button{
    animation: anima_button_open .8s linear 1 both;
}

.container.close .button{
    animation: anima_button_close 1s linear 1 both;
}

@keyframes anima_button_close
{
    0%{
        transform: scale(1) rotate(45deg);
    }
    100%{
        transform: scale(1) rotate(0);
    }
}

@keyframes anima_button_open
{
    0%{
        transform: scale(1) rotate(0);
    }
    70%{
        transform: scale(1) rotate(10deg);
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.45);
    }
    90%{
        transform: scale(.9) rotate(15deg);
    }
    95%{
        transform: scale(1.1) rotate(50deg);
    }
    100%{
        transform: scale(1) rotate(45deg);
    }
}

.container .tool{
    position: absolute;
    height: 50px;width: 140px;
    border-radius: 40px;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    transform: translateY(0) scale(0);
}

.tool::before{
    content: '';
    position: absolute;
    width: 10px;height: 10px;
    background-color: #fff;
    bottom: -5px;
    transform: rotate(45deg);
}

.tool .iconfont{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #fd23a8;
}

.container.open .tool{
    animation: anima_tool_open 1s linear 1 both;
}
.container.close .tool{
    animation: anima_tool_close 1s linear 1 both;
}

@keyframes anima_tool_open{
    0%{
        transform: translateY(0) scale(0);
    }
    45%{
        transform: translateY(-70px) scale(1);
    }
    47.5%{
        transform: translateY(-75px) scale(1);
    }
    50%{
        transform: translateY(-70px) scale(1);
    }
    60%{
        transform: translateY(-70px) scale(1) scaleX(1.02) scaleY(0.95);
    }
    70%{
        transform: translateY(-70px) scale(1) scaleX(0.98) scaleY(1);
    }
    80%{
        transform: translateY(-70px) scale(1) scaleX(1.02) scaleY(0.99);
    }
    90%{
        transform: translateY(-70px) scale(1) scaleX(1.02) scaleY(0.98);
    }
    100%{
        transform: translateY(-70px) scale(1);
    }
}

@keyframes anima_tool_close{
    0%{
        transform: translateY(-70px) scale(1);
    }
    100%{
        transform: translateY(0) scale(0);
    }
}

案例参考：学习：HTML&CSS制作Q弹的图标展开效果