牙齿吃柠檬 

<!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>
posted @ 2016-10-06 15:49  liwei742314100  阅读(94)  评论(0)    收藏  举报