本文展示了一个使用HTML、CSS和jQuery实现的按钮点击效果，包括菜单栏的过渡动画和旋转效果，通过修改元素的样式属性实现动态效果。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="up" class="rep"></div>
<div id="middle" class="trans"></div>
<div id="bottom" class="rep"></div>
<button id='btn'>click me</button>
</body>
</html>
body{
background-color:#000;
}
div{
position:absolute;
background-color:#fff;
height:3px;
margin-top:8px;
width:30px;
overflow:hidden;
margin-left:200px;
}
#up{
top:0;
}
#middle{
top:10px;
}
#bottom{
top:20px;
}
.trans{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.rep{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
$('#btn').click(function(){
$('#middle').css({
marginLeft:100,
backgroundColor:'#000'
});
$('#up').css({
transform:'rotate(45deg)',
top:10
});
$('#bottom').css({
transform:'rotate(-45deg)',
top:10
});
});
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
