移动端页面顶部菜单图标(3条横线)点击旋转
程序员文章站
2024-03-24 23:10:22
...
HTML中:
<button class="nav-mobile-button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
CSS中:
.nav-mobile-button{
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
background-color: transparent;
border: 1px solid transparent;
outline: none;
}
.nav-mobile-button .icon-bar{
display: block;
margin-top: 4px;
width: 22px;
height: 3px;
background: #f65d3f;
border-radius: 1px;
}
.rotate{
transform-origin:center center; /*旋转中心要是正中间才行*/
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transition: transform 0.2s; /*过度时间 可调*/
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-ms-transition: -ms-transform 0.2s;
-o-transition: -o-transform 0.2s;
}
.rotate1{
transform-origin:center center;
transform: rotate(0deg); /*返回原点*/
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transition: transform 0.2s;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-ms-transition: -ms-transform 0.2s;
-o-transition: -o-transform 0.2s;
}
jQuery中:
<script>
$(function(){
//点击顶部菜单图标旋转90°效果
$('.nav-mobile-button').click(function(){
if($('#left').is(':visible')){ //若左侧菜单栏可见,则
$(this).removeClass('rotate');
$(this).addClass('rotate1');
$('#left').css("display", "none");
}else{
$(this).removeClass('rotate1');
$(this).addClass('rotate');
$('#left').css("display", "block");
}
});
});
</script>
上一篇: JS 原型和原型链
下一篇: Android蓝牙4.0扫描