<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);
}
}