站长资源<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>利用css菜单变X号-wangdahai.cn</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
margin:0;
padding:0;
}
.icon_box {
width:70px;
height:100px;
margin:200px auto;
cursor:pointer;
}
.icon_box span {
width:70px;
height:6px;
background:yellowgreen;
display:block;
margin-bottom:3px;
transition:all 1s;
-webkit-transition:all 1s;
transform-origin:20px center;
}
.icon1 {
transform:rotate(45deg)!important;
}
.icon2 {
width:0!important;
margin-left:70px!important;
}
.icon3 {
transform:rotate(-45deg)!important;
}
</style>
</head>
<body>
<div class="icon_box">
<span></span>
<span></span>
<span></span>
</div>
<script>
var can_click = true;
$(".icon_box").click(function(event) {
if (can_click) {
$(".icon_box span").eq(0).addClass("icon1");
$(".icon_box span").eq(1).addClass("icon2");
$(".icon_box span").eq(2).addClass("icon3");
can_click = false;
} else {
$(".icon_box span").removeAttr('class');
can_click = true;
}
});
</script>
</body>
</html>
响应式导航按钮的实现
本文出处：来自互联网信息共享，请勿相信收费信息站长资源 » 响应式导航按钮的实现
评论前必须登录！
注册