画乌龟爬行代码

蓼汀花溆77
已于 2023-10-07 10:03:31 修改
阅读量82
点赞数
文章标签： css css3 html
于 2023-10-07 00:11:18 首次发布
本文链接：https://blog.csdn.net/weixin_73613802/article/details/133625874
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background-color: blue;
        }

        #turtle{
        width: 200px;
        height:260px;
        margin:100px auto;
       /* border:1px solid red;*/
        position:absolute;
        left:400px;
        top:200px;
        transition: rotate(0deg);
       }
       .headbox{
        width:70px;
        height:42px;
        background-color: #fff;
        background-image: linear-gradient(#fff,black);
        border-top-left-radius:25px;
        border-top-right-radius:25px;
        position:relative;
        left:65px;
        top:30px;
       }
       .eyebox1{
        height:10px;
        width: 10px;
        background-color: black;
        border-radius:50%;
        position:relative;
        left:16px;
        top:10px;
       }
       .eyebox2{
        height:10px;
        width: 10px;
        background-color: black;
        border-radius:50%;
        position:relative;
        left:45px;
       }
        .footbox1{
            height:240px;
            width:30px;
            background-color: #fff;
            background-image: linear-gradient(black,#fff);
            border-radius:30px;
            transform:rotate(45deg);
            position:relative;
            left:85px
        }
        .footbox2{
            height:240px;
            width:30px;
            background-color: #fff;
            background-image: linear-gradient(#fff,black);
            border-radius:30px;
            transform:rotate(-45deg);
            position:relative;
            left:85px;
            top:-240px
        }
        .bigbox{
            /*margin:0 auto;*/
            height:200px;
            width:200px;
            border-radius:50%;
            background-color: blcak;
            position:relative;
            top:-460px;
           animation: circleRotate linear 2s infinite;
        }
        .middlebox1{
            height:200px;
            width:100px;
            border-top-left-radius:100px;
            border-bottom-left-radius:100px;
            background-color:black;
           
        }
        .middlebox2{
            height:200px;
            width:100px;
            background-color:#fff; 
            border-top-right-radius:100px;
            border-bottom-right-radius:100px;
            position:relative;
            left:100px;
            top:-200px;
        }
        .topbox{
            height:100px;
            width:100px;
            border-radius:50%;
            background-color: #fff;
            position:relative;
            left:50px;
            top:-400px;

        }
        .bottombox{
            height:100px;
            width:100px;
            border-radius:50%;
            background-color: black;
            position:relative;
            left:50px;
            top:-400px;
            
        }
        .smallbox1{
            height:20px;
            width:20px;
            background-color: black;
            border-radius:50%;
            position:relative;
            left:50px;
            top:50px;
        }
        .smallbox2{
            height:20px;
            width:20px;
            background-color: #fff;
            border-radius:50%;
            position:relative;
            left:50px;
            top:50px;
        }
      

        .box1{
            height:20px;
            width:20px;
            border-radius:50%;
            background-color: black;
        }
        .box2{
            height:30px;
            width:30px;
            border-radius:50%;
            background-color:blue;
            position:relative;
            left:5px;
            top:-7px;
        }

        .box3{
            height:20px;
            width:20px;
            border-radius:50%;
            background-color:#fff;
            
        }
        .box4{
            height:30px;
            width:30px;
            border-radius:50%;
            background-color:blue;
            position:relative;
            left:-15px;
           
            
           
        }
      .tailbox{
        width:0px;
        height:0px;
        position:relative;
        left:100px;
        top:260px;
         transform:rotate(20deg);
        animation:flip linear 1s infinite;
      }
        @keyframes circleRotate{
            0%{
                transform:rotate(0deg);
            }100%{
                transform:rotate(360deg);
            }
        }
       
        @keyframes flip{
            0%{
                transform:rotateY(0deg);
            }100%{
                transform:rotateY(360deg);
            }
        }
    </style>
    <script type="text/javascript">
       
        window.onload=function(){
            var turtle=document.getElementById("turtle");
            var foot1=document.getElementById("foot1"); 
            var foot2=document.getElementById("foot2");
//腿的颜色渐变

           turtle.style.transform="rotate("+90+"deg)";
           move(turtle,600,10,"left",function(){
            foot1.style.backgroundImage="radial-gradient("+240+"px "+240+"px,black,#fff)";
            foot2.style.backgroundImage="radial-gradient("+240+"px "+240+"px,black,#fff)";
            
            turtle.style.transform="rotate("+0+"deg)";
            move(turtle,0,-10,"top",function(){
                foot1.style.backgroundImage="linear-gradient(#fff,black)";
                foot2.style.backgroundImage="linear-gradient(black,#fff)";
                turtle.style.transform="rotate("+270+"deg)";
                move(turtle,400,-10,"left",function(){
                    foot1.style.backgroundImage="radial-gradient("+240+"px "+240+"px,black,#fff)";
                    foot2.style.backgroundImage="radial-gradient("+240+"px "+240+"px,black,#fff)";
                    
                    turtle.style.transform="rotate("+180+"deg)";
                    move(turtle,200,10,"top",function(){
                        foot1.style.backgroundImage="linear-gradient(black,#fff)";
                        foot2.style.backgroundImage="linear-gradient(#fff,black)";
                        turtle.style.transform="rotate("+90+"deg)";
                    });
                });
            });
           });

        }
        function getStyle(obj,name){
            if(window.getComputedStyle){
                return getComputedStyle(obj,null)[name];
            }else{
                return obj.currentStyle[name];
            }
        }
        
        var timer;
       
        function move(obj,target,speed,attr,callback){
              clearInterval(timer);
            timer=setInterval(function(){
                var oldValue=parseInt(getStyle(obj,attr)); 
                    var newValue=oldValue+speed;
                    
                    if((speed>0&&newValue>target)||(speed<0&&newValue<0)){
                        newValue=target;
                    }
                    obj.style[attr]=newValue+"px";
                    if(target==newValue){
                        clearInterval(timer);
                        callback();
                    }
            },50);
        }
      
    </script>
    
</head>
    <div class="bigbigbox" id="turtle">
        <div class="tailbox">
            <div class="box1">
                <div class="box2"></div>
            </div>
            <div class="box3">
                <div class="box4"></div>
            </div>
        </div>
    <div class="footbox">
        <div class="headbox">
            <div class="eyebox">
                <div class="eyebox1"></div>
                <div class="eyebox2"></div>
            </div>
        </div>
        <div class="footbox1" id="foot1"></div>
        <div class="footbox2" id="foot2"></div>
    </div>
    <div class="bigbox">
        <div class="middlebox1"></div>
        <div class="middlebox2"></div>
        <div class="topbox">
            <div class="smallbox1"></div>
        </div>
        <div class="bottombox">
            <div class="smallbox2"></div>
        </div>
    </div>
    </div>
    
</body>
</html>