<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: orange;
}
*{
margin:0;padding:0;
}
#d1{
width:1px;border-right:20px solid rgba(157,157,157,0.01);border-left:20px solid rgba(157,157,157,0.01);border-top:100px solid blue;float:left;
}
#d2{
width:1px;border-right:20px solid rgba(157,157,157,0.01);border-left:20px solid rgba(157,157,157,0.01);border-top:100px solid blue;float:left
}
#d3{
width:1px;border-right:20px solid rgba(157,157,157,0.01);border-left:20px solid rgba(157,157,157,0.01);border-top:100px solid blue;float:left
}
#d4{
width:1px;border-right:20px solid rgba(157,157,157,0.01);border-left:20px solid rgba(157,157,157,0.01);border-top:100px solid blue;float:left
}
#d10{
width:1px;border-right:20px solid rgba(157,157,157,0.01);border-left:20px solid rgba(157,157,157,0.01);border-bottom:100px solid red;float:left;
}
#d11{
width:1px;border-right:20px solid rgba(157,157,157,0.01);border-left:20px solid rgba(157,157,157,0.01);border-bottom:100px solid red;float:left;
}
#d22{
width:1px;border-right:20px solid rgba(157,157,157,0.01);border-left:20px solid rgba(157,157,157,0.01);border-bottom:100px solid red;float:left
}
#d33{
width:1px;border-right:20px solid rgba(157,157,157,0.01);border-left:20px solid rgba(157,157,157,0.01);border-bottom:100px solid red;float:left
}
#d44{
width:1px;border-right:20px solid rgba(157,157,157,0.01);border-left:20px solid rgba(157,157,157,0.01);border-bottom:100px solid red;float:left
}
#dd1{
position: absolute;
top:-100px;
}
#dd2{
position: absolute;
left:-20px;
top:100px;
}
#dd0{
height:300px;
width:300px;
margin:200px auto;
border:1px solid orange;
position: relative;
}
#yuan{
height:70px;
width:70px;
border-radius: 50% 20%;
background-color: green;
position: absolute;
left:50px;
top:25px;
z-index: -500;
}
#yuan p{
margin-top:20px;
margin-left:20px;
}
</style>
</head>
<body>
<button id="b1" style="height: 50px;width:50px; margin-left:550px;;">咬</button>
<button id="b2" style="height: 50px;width:50px;">张</button>
<div id="dd0">
<div id="dd1">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</div>
<div id="dd2">
<div id="d10"></div>
<div id="d11"></div>
<div id="d22"></div>
<div id="d33"></div>
<div id="d44"></div>
</div>
<div id="yuan"><p>柠檬</p></div>
</div>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(window).ready(function(){
$('#b1').click(function(){
$('#dd1').animate({
top:0
},1000);
$('#dd2').animate({
top:0
},1000);
$('#yuan').fadeOut(700);
$('#d1').css(
'border-top-color','red'
);
$('#d2').css(
'border-top-color','red'
);
$('#d3').css(
'border-top-color','red'
);
$('#d4').css(
'border-top-color','red'
);
})
});
$(document).ready(function(){
$('#b2').click(function(){
$('#dd1').animate({
'top':-100
},2000);
$('#dd2').animate({
'top':100
},2000);
$('#yuan').fadeIn(4000);
})
})
</script>
</body>
</html>
