移动端页面顶部菜单图标（3条横线）点击旋转

雨点打透心脏的1/2处 2022-01-23 09:37 220阅读 0赞

HTML中：

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中：