<!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>
时间： 2024-10-10 07:26:29