transition-分栏按钮动画
Posted yuyedaocao
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了transition-分栏按钮动画相关的知识，希望对你有一定的参考价值。
=》
css：
.cateBtn{
position: relative;
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
text-align: center;
width: 30px;
height: 30px;
display: inline-block;
}
.cateLine,.cateLine::after,.cateLine::before{
position: absolute;
width: 20px;
height: 2px;
background: red;
transition: all .3s linear 0s;
}
.cateLine{
display: inline-block;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.cateLine::after{
content: "";
bottom: 6px;
left: 0px;
}
.cateLine::before{
content: "";
top: 6px;
left: 0px;
}
.open .cateLine{
background: rgba(0,0,0,0);
}
.open .cateLine::after{
bottom: 0px;
transform: rotate(135deg);
}
.open .cateLine::before{
top: 0px;
transform: rotate(45deg);
}
html：
<a class="cateBtn">
<span class="cateLine">
</span>
</a>
js：
$(".cateBtn").on("click",function(){
$(this).toggleClass("open");
})
以上是关于transition-分栏按钮动画的主要内容，如果未能解决你的问题，请参考以下文章