使用css+js做的乌龟爬行

最新推荐文章于 2024-06-16 22:13:37 发布
Xayda~
最新推荐文章于 2024-06-16 22:13:37 发布
阅读量57
点赞数 1
文章标签： css css3 html
本文链接：https://blog.csdn.net/2303_78650625/article/details/133648227
版权
<!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;
          }
  
          #wugui{
          width: 400px;
          height:300px;
          margin:50px auto;
         
          position:absolute;
          left:400px;
          top:280px;
          transition: rotate(0deg);
         }
         .wuguihead{
          width:60px;
          height:50px;
          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;
         }
         .eye1{
          height:10px;
          width: 10px;
          background-color: black;
          border-radius:50%;
          position:relative;
          left:9px;
          top:10px;
         }
         .eye2{
          height:10px;
          width: 10px;
          background-color: black;
          border-radius:50%;
          position:relative;
          left:45px;
         }
          .wuguifoot1{
              height:240px;
              width:30px;
              background-color: #fff;
              background-image: linear-gradient(black,#fff);
              border-radius:30px;
              transform:rotate(45deg);
              position:relative;
              left:85px
          }
          .wuguifoot2{
              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
          }
          .taijibigbox{
            
              height:200px;
              width:200px;
              border-radius:50%;
              background-color: blcak;
              position:relative;
              top:-460px;
             animation: circleRotate linear 2s infinite;
          }
          .taijimiddlebox1{
              height:200px;
              width:100px;
              border-top-left-radius:100px;
              border-bottom-left-radius:100px;
              background-color:black;
             
          }
          .taijimiddlebox2{
              height:200px;
              width:100px;
              background-color:#fff; 
              border-top-right-radius:100px;
              border-bottom-right-radius:100px;
              position:relative;
              left:100px;
              top:-200px;
          }
.taijitopbox{
              height:100px;
              width:100px;
              border-radius:50%;
              background-color: #fff;
              position:relative;
              left:50px;
              top:-400px;
  
          }
          .taijibottombox{
              height:100px;
              width:100px;
              border-radius:50%;
              background-color: black;
              position:relative;
              left:50px;
              top:-400px;
              
          }
          .taijismallbox1{
              height:20px;
              width:20px;
              background-color: black;
              border-radius:50%;
              position:relative;
              left:50px;
              top:50px;
          }
          .taijismallbox2{
              height:20px;
              width:20px;
              background-color: #fff;
              border-radius:50%;
              position:relative;
              left:50px;
              top:50px;
          }
        
  
          .tail1{
              height:20px;
              width:20px;
              border-radius:50%;
              background-color: black;
          }
          .tail2{
              height:30px;
              width:30px;
              border-radius:50%;
              background-color:blue;
              position:relative;
              left:5px;
              top:-7px;
          }
  
          .tail3{
              height:20px;
              width:20px;
              border-radius:50%;
              background-color:#fff;
              
          }
          .tail4{
              height:30px;
              width:30px;
              border-radius:50%;
              background-color:blue;
              position:relative;
              left:-15px;
             
              
             
          }
        .tail{
          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 wugui=document.getElementById("wugui");
              var foot1=document.getElementById("foot1"); 
              var foot2=document.getElementById("foot2");
  
  
             wugui.style.transform="rotate("+90+"deg)";
             move(wugui,650,10,"left",function(){
              foot1.style.backgroundImage="radial-gradient("+250+"px "+250+"px,black,#fff)";
              foot2.style.backgroundImage="radial-gradient("+250+"px "+250+"px,black,#fff)";
              
              wugui.style.transform="rotate("+0+"deg)";
              move(wugui,0,-12,"top",function(){
                  foot1.style.backgroundImage="linear-gradient(#fff,black)";
                  foot2.style.backgroundImage="linear-gradient(black,#fff)";
                  wugui.style.transform="rotate("+270+"deg)";
                  move(wugui,400,-10,"left",function(){
                      foot1.style.backgroundImage="radial-gradient("+250+"px "+250+"px,black,#fff)";
                      foot2.style.backgroundImage="radial-gradient("+250+"px "+250+"px,black,#fff)";
                      
                      wugui.style.transform="rotate("+180+"deg)";
                      move(wugui,250,10,"top",function(){
                          wugui.style.backgroundImage="linear-gradient(black,#fff)";
                          wugui.style.backgroundImage="linear-gradient(#fff,black)";
                          wugui.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 id="wugui">
          <div class="tail">
              <div class="tail1">
                  <div class="tail2"></div>
              </div>
              <div class="tail3">
                  <div class="tail4"></div>
              </div>
          </div>
      <div class="footbox">
          <div class="wuguihead">
              <div class="eyebox">
                  <div class="eye1"></div>
                  <div class="eye2"></div>
              </div>
          </div>
          <div class="wuguifoot1" id="foot1"></div>
          <div class="wuguifoot2" id="foot2"></div>
      </div>
      <div class="taijibigbox">
          <div class="taijimiddlebox1"></div>
          <div class="taijimiddlebox2"></div>
          <div class="taijitopbox">
              <div class="taijismallbox1"></div>
          </div>
          <div class="taijibottombox">
              <div class="taijismallbox2"></div>
          </div>
      </div>
      </div>
      
  </body>
  </html>