<!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>
使用css+js做的乌龟爬行
最新推荐文章于 2024-08-31 21:39:38 发布