纯css哆莱A梦

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="css3动画" content="用纯css3绘制的能自适应浏览器的哆啦a梦，css3，html5,css3绘图，自适应网页，多啦A梦，css3动画"/>
<meta name="哆啦a梦" content="用纯css3绘制的能自适应浏览器的哆啦a梦，css3，html5,css3绘图，自适应网页，多啦A梦，css3动画"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用纯css3绘制的能自适应浏览器的哆啦a梦，css3，html5,css3绘图，自适应网页，多啦A梦，css3动画</title>
<style type="text/css">
@media screen and (max-width: 200px) {
.dlam {width: 150px;height:243.75px;}

}
@media screen and (max-width: 400px) {
.dlam {width: 200px;height:325px;}

}

@media screen and (min-width: 400px) {
.dlam {width: 200px;height:325px;}

}
@media screen and (min-width: 600px) {
.dlam {width: 300px;height:487.5px;}

}

@media screen and (min-width: 1000px) {
.dlam {width: 400px;height:650px;}

}

@media screen and (min-width: 2000px) {
.dlam {width: 500px;height:778.5px;}

}
.dlam {
border: 1px dashed #0C9;
min-width: 150px;
min-height: 243.75px;
margin-top: 50px;
margin-right: auto;
margin-left: auto;
overflow: hidden;
border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 10px 0px #666666;
-moz-box-shadow: 0px 0px 10px 0px #666666;
-ms-box-shadow: 0px 0px 3px 10px #666666;
-o-box-shadow: 0px 0px 3px 10px #666666;
-webkit-box-shadow: 0px 0px 10px 0px #666666;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.top {
cursor: pointer;
height: 45%;
width: 80%;
position: relative;
border: 2px solid #007EA8;
border-radius: 9999px;
-moz-border-radius: 9999px;
-ms-border-radius: 9999px;
-o-border-radius: 9999px;
-webkit-border-radius: 9999px;
left: 8.8%;
top: 0%;
background-color: #39C;
overflow: hidden;
}
.top-lian {
height: 80%;
width: 80%;
border: 2px solid #007EA8;
position: relative;
top: 20%;
left: 10%;
right: 10%;
border-radius: 9999px;
-moz-border-radius: 9999px;
-ms-border-radius: 9999px;
-o-border-radius: 9999px;
-webkit-border-radius: 9999px;
background-color: #FFF;
box-shadow: 0px -5px 10px 0px #0085B0;
-moz-box-shadow: 0px -5px 10px 0px #0085B0;
-ms-box-shadow: 0px -5px 10px 0px #0085B0;
-o-box-shadow: 0px -5px 10px 0px #0085B0;
-webkit-box-shadow: 0px -5px 10px 0px #0085B0;
}

.p1{
border-radius: 9999px;
-moz-border-radius: 9999px;
-ms-border-radius: 9999px;
-o-border-radius: 9999px;
-webkit-border-radius: 9999px;
background-color: #333;
height: 60%;
width: 65%;
position: relative;
top:10%;
left: 20%;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
animation:pp1 5s ;
-moz-animation:pp1 5s; /* Firefox */
-webkit-animation:pp1 5s; /* Safari and Chrome */
-ms-animation:pp1 5s; /* Opera */
-o-animation:pp1 5s;
-moz-animation-iteration-count:9999;
-webkit-animation-iteration-count:9999;
-ms-animation-iteration-count:9999;
-o-animation-iteration-count:9999;
animation-iteration-count:9999;
}
@keyframes pp1{
0%{top: 15%;left: 20%;height: 60%;width: 65%;}
20%{top: 4%;left: 20%;height: 60%;width: 65%;}
40%{top: 10%;left: 40%;height: 60%;width: 65%;}
60%{top: 15%;left: 20%;height: 60%;width: 65%;}
80%{top: 40%;left: 30%;height: 15%;width: 65%;}
85%{top: 15%;left: 5%;height: 60%;width: 65%;}
90%{top: 10%;left: 20%;height: 60%;width: 65%;}
100%{top: 15%;left: 20%;height: 60%;width: 65%;}
}
@-moz-keyframes pp1{
0%{top: 15%;left: 20%;height: 60%;width: 65%;}
20%{top: 4%;left: 20%;height: 60%;width: 65%;}
40%{top: 10%;left: 40%;height: 60%;width: 65%;}
60%{top: 15%;left: 20%;height: 60%;width: 65%;}
80%{top: 40%;left: 30%;height: 15%;width: 65%;}
85%{top: 15%;left: 5%;height: 60%;width: 65%;}
90%{top: 10%;left: 20%;height: 60%;width: 65%;}
100%{top: 15%;left: 20%;height: 60%;width: 65%;}
}
@-webkit-keyframes pp1{
0%{top: 15%;left: 20%;height: 60%;width: 65%;}
20%{top: 4%;left: 20%;height: 60%;width: 65%;}
40%{top: 10%;left: 40%;height: 60%;width: 65%;}
60%{top: 15%;left: 20%;height: 60%;width: 65%;}
80%{top: 40%;left: 30%;height: 15%;width: 65%;}
85%{top: 15%;left: 5%;height: 60%;width: 65%;}
90%{top: 10%;left: 20%;height: 60%;width: 65%;}
100%{top: 15%;left: 20%;height: 60%;width: 65%;}
}
@-o-keyframes pp1{
0%{top: 15%;left: 20%;height: 60%;width: 65%;}
20%{top: 4%;left: 20%;height: 60%;width: 65%;}
40%{top: 10%;left: 40%;height: 60%;width: 65%;}
60%{top: 15%;left: 20%;height: 60%;width: 65%;}
80%{top: 40%;left: 30%;height: 15%;width: 65%;}
85%{top: 15%;left: 5%;height: 60%;width: 65%;}
90%{top: 10%;left: 20%;height: 60%;width: 65%;}
100%{top: 15%;left: 20%;height: 60%;width: 65%;}
}
@-ms-keyframes pp1{
0%{top: 15%;left: 20%;height: 60%;width: 65%;}
20%{top: 4%;left: 20%;height: 60%;width: 65%;}
40%{top: 10%;left: 40%;height: 60%;width: 65%;}
60%{top: 15%;left: 20%;height: 60%;width: 65%;}
80%{top: 40%;left: 30%;height: 15%;width: 65%;}
85%{top: 15%;left: 5%;height: 60%;width: 65%;}
90%{top: 10%;left: 20%;height: 60%;width: 65%;}
100%{top: 15%;left: 20%;height: 60%;width: 65%;}
}
.p2{
border-radius: 9999px;
-webkit-border-radius:9999px;
-moz-border-radius:9999px;
-ms-border-radius:9999px;
-o-border-radius:9999px;
background-color: #333;
height: 60%;
width: 65%;
position: relative;
top:10%;
left: 20%;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
animation:pp1 5s ;
-moz-animation:pp1 5s; /* Firefox */
-webkit-animation:pp1 5s; /* Safari and Chrome */
-ms-animation:pp1 5s;
-o-animation:pp1 5s;/* Opera */
-moz-animation-iteration-count:9999;
-webkit-animation-iteration-count:9999;
-o-animation-iteration-count:9999;
-ms-animation-iteration-count:9999;
animation-iteration-count:9999;
}
.top-yan1 {
background-color: #FFF;
height: 25%;
width: 20%;
border: 2px solid #333;
border-radius: 9999px;
-moz-border-radius: 9999px;
-ms-border-radius: 9999px;
-o-border-radius: 9999px;
-webkit-border-radius: 9999px;
float: left;
margin-top: -10%;
margin-right: 0%;
margin-left: 25%;
overflow: hidden;
}
.top-yan1:hover .p1{
top:30%;}

.top-yan2 {
background-color: #FFF;
height: 25%;
width: 20%;
border: 2px solid #333;
border-radius: 9999px;
-moz-border-radius: 9999px;
-ms-border-radius: 9999px;
-o-border-radius: 9999px;
-webkit-border-radius: 9999px;
float: left;
margin-top: -10%;
margin-right: 0%;
margin-left: 3%;
overflow: hidden;
}
.p4{
height: 25%;
width: 22%;
border-radius: 9999px;
-moz-border-radius: 9999px;
-ms-border-radius: 9999px;
-o-border-radius: 9999px;
-webkit-border-radius: 9999px;
background-color: #FFF;
box-shadow: 0px 0px 3px 0px #FFFFFF;
-webkit-box-shadow: 0px 0px 3px 0px #FFFFFF;
-moz-box-shadow: 0px 0px 3px 0px #FFFFFF;
-ms-box-shadow: 0px 0px 3px 0px #FFFFFF;
-o-box-shadow: 0px 0px 3px 0px #FFFFFF;
position: relative;
left: 60%;
top: 40%;
right: auto;
}
.top-yan2:hover .p2{
top:30%;}
.top-lian:hover .p1{
top:35%;
left:30%;}
.top-lian:hover .p2{
top:35%;
left:6%;}
.top-bi1 {
background-color: #FF5353;
float: left;
height: 15%;
width: 15%;
border: 2px solid #F33;
margin-top: 12%;
margin-right: 36%;
margin-left: 42%;
border-radius: 9999px;
-moz-border-radius: 9999px;
-ms-border-radius: 9999px;
-o-border-radius: 9999px;
-webkit-border-radius: 9999px;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
box-shadow: 0px 0px 3px 0px #666666;
-webkit-box-shadow: 0px 0px 3px 0px #666666;
-moz-box-shadow: 0px 0px 3px 0px #666666;
-ms-box-shadow: 0px 0px 3px 0px #666666;
-o-box-shadow: 0px 0px 3px 0px #666666;
}
.top-bi1:hover{
box-shadow: 0px 0px 5px 0px #FFE064;
-webkit-box-shadow: 0px 0px 5px 0px #FFE064;
-moz-box-shadow: 0px 0px 5px 0px #FFE064;
-ms-box-shadow: 0px 0px 5px 0px #FFE064;
-o-box-shadow: 0px 0px 5px 0px #FFE064;
}
.p5{
height: 30%;
width: 25%;
border-radius: 9999px;
-moz-border-radius: 9999px;
-ms-border-radius: 9999px;
-o-border-radius: 9999px;
-webkit-border-radius: 9999px;
background-color: #FFDBDB;
box-shadow: 0px 0px 6px 0px #FFFFFF;
-webkit-box-shadow: 0px 0px 6px 0px #FFFFFF;
-moz-box-shadow: 0px 0px 6px 0px #FFFFFF;
-ms-box-shadow: 0px 0px 6px 0px #FFFFFF;
-o-box-shadow: 0px 0px 6px 0px #FFFFFF;
position: relative;
left: 50%;
top: 40%;
}
.top-bi2 {
background-color: #FF5353;
height: 100%;
width: 0%;
margin-top: 0%;
margin-left: auto;
margin-right: auto;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-ms-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-right-color: #C30;
border-left-color: #C30;
}
.top-zui {
background-color: #FF4848;
float: left;
height: 20%;
width: 40%;
margin-top: 0%;
margin-right: 30%;
margin-left: 30%;
border-radius: 0px 0px 9999px 9999px;
-webkit-border-radius:0px 0px 9999px 9999px;
-moz-border-radius:0px 0px 9999px 9999px;
-ms-border-radius:0px 0px 9999px 9999px;
-o-border-radius:0px 0px 9999px 9999px;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-ms-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #C30;
border-right-width: 2px;
border-left-width: 2px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #C30;
border-left-color: #C30;
}
.bixian {
height: 13%;
width: 100%;
float: left;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 2px;
}
.bixian2 {
background-color: #FF4848;
height: 100%;
width: 0%;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-right-color: #D2380B;
border-left-color: #D2380B;
}
.top-zui2{
float: left;
height: 35%;
width: 100%;
border-radius: 0px 0px 9999px 9999px;
-webkit-border-radius:0px 0px 9999px 9999px;
-moz-border-radius:0px 0px 9999px 9999px;
-ms-border-radius:0px 0px 9999px 9999px;
-o-border-radius:0px 0px 9999px 9999px;
background-color: #FFFFFF;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-ms-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #C30;
border-bottom-color: #C30;
border-left-color: #C30;
margin-left: -2px;
margin-top: -1px;
}
.top-zui:hover{
height: 20%;
width: 60%;
height: 30%;
margin-right: 20%;
margin-left: 20%;
}
.top-zui:hover .top-bi2 {
background-color: #FF5353;
height: 100%;
width: 0%;
margin-top: 0%;
margin-left: auto;
margin-right: auto;
}
.top-zui:hover .p3{
border-radius:0px;
background-color: #F00;
height: 30%;
width: 65%;
position: relative;
top: 10%;
left: 20%;
}
.top-zui:hover .top-zui2{
height: 10%;
}
.mao1,.mao2,.mao3,.mao4,.mao5,.mao6{
background-color: #369;
height: 30%;
width: 2%;
position: relative;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.mao1{
top: 20%;
left: 5%;
transform:rotate(-60deg);
-webkit-transform:rotate(-60deg);
-moz-transform:rotate(-60deg);
-ms-transform:rotate(-60deg);
-o-transform:rotate(-60deg);
}
.mao2{
top: -10%;
left: 88%;
transform:rotate(55deg);
-webkit-transform:rotate(50deg);
-moz-transform:rotate(50deg);
-ms-transform:rotate(50deg);
-o-transform:rotate(50deg);
}
.mao3{
top: -25%;
left: 5%;
transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
}
.mao4{
top: -55%;
left: 90%;
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
}
.mao5{
top: -70%;
left: 5%;
transform:rotate(-120deg);
-webkit-transform:rotate(-120deg);
-moz-transform:rotate(-120deg);
-ms-transform:rotate(-120deg);
-o-transform:rotate(-120deg);
}
.mao6{
top: -100%;
left: 90%;
transform:rotate(120deg);
-webkit-transform:rotate(120deg);
-moz-transform:rotate(120deg);
-ms-transform:rotate(120deg);
-o-transform:rotate(120deg);
}
.top-lian:hover .mao1,.top-lian:hover .mao2,.top-lian:hover .mao3,.top-lian:hover .mao4,.top-lian:hover .mao5,.top-lian:hover .mao6{
background-color: #F36;
height: 32%;
}
.bozi {
background-color: #FFF;
height: 2%;
width: 40%;
border: 2px solid #369;
margin-top: -2%;
margin-right: auto;
margin-left: auto;
border-radius: 9999px;
-webkit-border-radius:9999px;
-moz-border-radius:9999px;
-ms-border-radius:9999px;
-o-border-radius:9999px;
position: relative;
top: 46%;
z-index: 1000;
}

.lingdan{
height: 200%;
width: 17%;
border: 2px solid #FC0;
border-radius: 9999px;
-webkit-border-radius:9999px;
-moz-border-radius:9999px;
-ms-border-radius:9999px;
-o-border-radius:9999px;
overflow: hidden;
background-color: #FEFAE9;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
-webkit-transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-ms-transition: all 1s ease 0s;
-o-transition: all 1s ease 0s;
transition: all 1s ease 0s;
}
.bozi:hover .lingdan{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
.bozi:hover{

background-color: #FFFDF7;
}
.xiaoyuan{
margin-top: 30%;
border-radius: 9999px;
-moz-border-radius: 9999px;
-ms-border-radius: 9999px;
-o-border-radius: 9999px;
-webkit-border-radius: 9999px;
border: 2px solid #FFD42A;
height: 25%;
width: 25%;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
}
.shudiao{
height: 50%;
width: 10%;
margin-top: -3px;
margin-left: auto;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #FFD42A;
border-right-color: #FFD42A;
border-bottom-color: #FFD42A;
border-left-color: #FFD42A;
background-color: #FFF;
margin-right: auto;
}
.shengti {
cursor: pointer;
background-color: #39C;
height: 38%;
width: 65%;
margin-right: auto;
margin-left: auto;
border-radius: 9999px;
-moz-border-radius: 9999px;
-ms-border-radius: 9999px;
-o-border-radius: 9999px;
-webkit-border-radius: 9999px;
margin-top: -4%;
}
.shoubi1 {
cursor: pointer;
background-color: #39C;
height: 60%;
width: 18%;
border-radius: 9000px/30000px;
-moz-border-radius: 9000px/30000px;
-ms-border-radius: 9000px/30000px;
-o-border-radius: 9000px/30000px;
-webkit-border-radius: 9000px/30000px;
transform: rotate(42deg);
-webkit-transform: rotate(42deg);
-moz-transform: rotate(42deg);
-o-transform: rotate(42deg);
-ms-transform: rotate(42deg);
position: relative;
left: -10%;
top: 7%;
z-index: 1;
border: 2px none #369;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;

}

.shengti:hover .shoubi1{
top: -8%;
transform: rotate(150deg);
-ms-transform: rotate(150deg);
-webkit-transform: rotate(150deg);
-moz-transform: rotate(150deg);
-o-transform: rotate(150deg);
animation:ss 0.5s ;
-moz-animation:ss 0.5s; /* Firefox */
-webkit-animation:ss 0.5s; /* Safari and Chrome */
-o-animation:ss 0.5s; /* Opera */
-ms-animation:ss 0.5s;
-moz-animation-iteration-count:5;
-webkit-animation-iteration-count:5;
-o-animation-iteration-count:5;
-ms-animation-iteration-count:5;
animation-iteration-count:5;
}
@keyframes ss{
0%{top: 7%;transform: rotate(42deg);}
50%{top: -8%;transform: rotate(150deg);}
100%{top: 7%;transform: rotate(42deg);}
}
@-moz-keyframes ss{
0%{top: 7%;-moz-transform: rotate(42deg);}
50%{top: -8%;-moz-transform: rotate(150deg);}
100%{top: 7%;-moz-transform: rotate(42deg);}
}
@-webkit-keyframes ss{
0%{top: 7%;-webkit-transform: rotate(42deg);}
50%{top: -8%;-webkit-transform: rotate(150deg);}
100%{top: 7%;-webkit-transform: rotate(42deg);}
}
@-o-keyframes ss{
0%{top: 7%;-o-transform: rotate(42deg);}
50%{top: -8%;-o-transform: rotate(150deg);}
100%{top: 7%;-o-transform: rotate(42deg);}
}
@-ms-keyframes ss{
0%{top: 7%;-ms-transform: rotate(42deg);}
50%{top: -8%;-ms-transform: rotate(150deg);}
100%{top: 7%;-ms-transform: rotate(42deg);}
}
.shoubi1:hover {
top: -8%;
transform: rotate(150deg);
-moz-transform: rotate(150deg);
-webkit-transform: rotate(150deg);
-o-transform: rotate(150deg);
-ms-transform: rotate(150deg);
}
.ctou1{
cursor: pointer;
border-radius: 9999px;
-moz-border-radius: 9999px;
-ms-border-radius: 9999px;
-o-border-radius: 9999px;
-webkit-border-radius: 9999px;
height: 30%;
width: 100%;
border: 2px solid #CCCCCC;
background-color: #FEFDF3;
position: relative;
top: 70%;
}
.ctou2{
cursor: pointer;
border-radius: 9999px;
-moz-border-radius: 9999px;
-ms-border-radius: 9999px;
-o-border-radius: 9999px;
-webkit-border-radius: 9999px;
height: 30%;
width: 100%;
border: 2px solid #CCCCCC;
background-color: #FEFDF3;
position: relative;
top: 70%;
}
.duzi{
cursor: pointer;
height: 82%;
width: 80%;
position: relative;
left: 10%;
top: -57%;
right: 25%;
background-color: #FFF;
border: 2px solid #5B92C8;
border-radius: 9999px;
-moz-border-radius: 9999px;
-ms-border-radius: 9999px;
-o-border-radius: 9999px;
-webkit-border-radius: 9999px;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
z-index: 10;
}
.shoubi2 {
cursor: pointer;
background-color: #39C;
height: 60%;
width: 18%;
border-radius: 9000px/30000px;
-moz-border-radius: 9000px/30000px;
-ms-border-radius: 9000px/30000px;
-o-border-radius: 9000px/30000px;
-webkit-border-radius: 9000px/30000px;
transform: rotate(-42deg);
-webkit-transform: rotate(-42deg);
-moz-transform: rotate(-42deg);
-ms-transform: rotate(-42deg);
-o-transform: rotate(-42deg);
position: relative;
top: -136%;
z-index: 0;
border: 2px none #369;
left: 90%;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.shoubi2:hover{
top: -156%;
transform: rotate(-150deg);
-webkit-transform: rotate(-150deg);
-moz-transform: rotate(-150deg);
-ms-transform: rotate(-150deg);
-o-transform: rotate(-150deg);
}
.shengti:hover .shoubi2{
top: -156%;
transform: rotate(-150deg);
-webkit-transform: rotate(-150deg);
-moz-transform: rotate(-150deg);
-ms-transform: rotate(-150deg);
-o-transform: rotate(-150deg);
animation:ss1 0.5s ;
-moz-animation:ss1 0.5s; /* Firefox */
-webkit-animation:ss1 0.5s; /* Safari and Chrome */
-ms-animation:ss1 0.5s;
-o-animation:ss1 0.5s; /* Opera */
-moz-animation-iteration-count:5;
-webkit-animation-iteration-count:5;
-o-animation-iteration-count:5;
-ms-animation-iteration-count:5;
animation-iteration-count:5;
}
@keyframes ss1{
0%{top: -136%;transform: rotate(-42deg);-webkit-transform: rotate(-42deg);-moz-transform: rotate(-42deg);-o-transform: rotate(-42deg);-ms-transform: rotate(-42deg);}
50%{top: -156%;transform: rotate(-150deg);-webkit-transform: rotate(-150deg);-moz-transform: rotate(-150deg);-o-transform: rotate(-150deg);-ms-transform: rotate(-150deg);}
100%{top: -136%;transform: rotate(-42deg);-webkit-transform: rotate(-42deg);-moz-transform: rotate(-42deg);-o-transform: rotate(-42deg);-ms-transform: rotate(-42deg);}
}
@-moz-keyframes ss1{
0%{top: -136%;transform: rotate(-42deg);-webkit-transform: rotate(-42deg);-moz-transform: rotate(-42deg);-o-transform: rotate(-42deg);-ms-transform: rotate(-42deg);}
50%{top: -156%;transform: rotate(-150deg);-webkit-transform: rotate(-150deg);-moz-transform: rotate(-150deg);-o-transform: rotate(-150deg);-ms-transform: rotate(-150deg);}
100%{top: -136%;transform: rotate(-42deg);-webkit-transform: rotate(-42deg);-moz-transform: rotate(-42deg);-o-transform: rotate(-42deg);-ms-transform: rotate(-42deg);}
}
@-webkit-keyframes ss1{
0%{top: -136%;transform: rotate(-42deg);-webkit-transform: rotate(-42deg);-moz-transform: rotate(-42deg);-o-transform: rotate(-42deg);-ms-transform: rotate(-42deg);}
50%{top: -156%;transform: rotate(-150deg);-webkit-transform: rotate(-150deg);-moz-transform: rotate(-150deg);-o-transform: rotate(-150deg);-ms-transform: rotate(-150deg);}
100%{top: -136%;transform: rotate(-42deg);-webkit-transform: rotate(-42deg);-moz-transform: rotate(-42deg);-o-transform: rotate(-42deg);-ms-transform: rotate(-42deg);}
}
@-o-keyframes ss1{
0%{top: -136%;transform: rotate(-42deg);-webkit-transform: rotate(-42deg);-moz-transform: rotate(-42deg);-o-transform: rotate(-42deg);-ms-transform: rotate(-42deg);}
50%{top: -156%;transform: rotate(-150deg);-webkit-transform: rotate(-150deg);-moz-transform: rotate(-150deg);-o-transform: rotate(-150deg);-ms-transform: rotate(-150deg);}
100%{top: -136%;transform: rotate(-42deg);-webkit-transform: rotate(-42deg);-moz-transform: rotate(-42deg);-o-transform: rotate(-42deg);-ms-transform: rotate(-42deg);}
}
@-ms-keyframes ss1{
0%{top: -136%;transform: rotate(-42deg);-webkit-transform: rotate(-42deg);-moz-transform: rotate(-42deg);-o-transform: rotate(-42deg);-ms-transform: rotate(-42deg);}
50%{top: -156%;transform: rotate(-150deg);-webkit-transform: rotate(-150deg);-moz-transform: rotate(-150deg);-o-transform: rotate(-150deg);-ms-transform: rotate(-150deg);}
100%{top: -136%;transform: rotate(-42deg);-webkit-transform: rotate(-42deg);-moz-transform: rotate(-42deg);-o-transform: rotate(-42deg);-ms-transform: rotate(-42deg);}
}
.koudai{
width: 80%;
margin-right: auto;
margin-left: auto;
height: 35%;
margin-top: 50%;
border-radius: 0px 0px 9999px 9999px;
-moz-border-radius: 0px 0px 9999px 9999px;
-ms-border-radius: 0px 0px 9999px 9999px;
-o-border-radius: 0px 0px 9999px 9999px;
-webkit-border-radius: 0px 0px 9999px 9999px;
background-color: #FFE;
box-shadow: 0px 3px 3px 0px #FFFFEE;
-moz-box-shadow: 0px 3px 3px 0px #FFFFEE;
-ms-box-shadow: 0px 3px 3px 0px #FFFFEE;
-o-box-shadow: 0px 3px 3px 0px #FFFFEE;
-webkit-box-shadow: 0px 3px 3px 0px #FFFFEE;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #369;
border-right-color: #369;
border-bottom-color: #369;
border-left-color: #369;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-ms-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
.koudai:hover{
height:40%;}
.xiaokoudai{
float: left;
height: 0%;
width: 100%;
margin-top: -2px;
margin-left: -2px;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-ms-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
background-color: #FFFFEE;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #369;
border-right-color: #369;
border-bottom-color: #369;
border-left-color: #369;
}
.koudai:hover .xiaokoudai{
height: 70%;
background-color: #FFFFFF;
border-radius: 0px 0px 9999px 9999px;
-moz-border-radius: 0px 0px 9999px 9999px;
-ms-border-radius: 0px 0px 9999px 9999px;
-o-border-radius: 0px 0px 9999px 9999px;
-webkit-border-radius: 0px 0px 9999px 9999px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #369;
}
.jiao1{
cursor: pointer;
background-color: #39C;
height: 30%;
width: 35%;
position: relative;
top: -120%;
left: 15%;
z-index: -1;
border-radius: 9000px/30000px;
-moz-border-radius: 9000px/30000px;
-ms-border-radius: 9000px/30000px;
-o-border-radius: 9000px/30000px;
-webkit-border-radius: 9000px/30000px;
}
.jiao2{
cursor: pointer;
background-color: #39C;
height: 30%;
width: 35%;
position: relative;
top: -150%;
left: 52%;
z-index: -1;
border-radius: 9000px/30000px;
-moz-border-radius: 9000px/30000px;
-ms-border-radius: 9000px/30000px;
-o-border-radius: 9000px/30000px;
-webkit-border-radius: 9000px/30000px;
}
.jiaozi{
cursor: pointer;
background-color: #FEFDF3;
border: 2px solid #CCC;
position: relative;
left: -3%;
top: 70%;
height: 40%;
width: 106%;
border-radius: 30000px;
-moz-border-radius: 30000px;
-ms-border-radius: 30000px;
-o-border-radius: 30000px;
-webkit-border-radius: 30000px;
z-index: 2;
}
body {
background-color: #FFFDF4;
background-position: left;
}
</style>
</head>

<body>
<div class="dlam">

<div class="bozi">
<div class="lingdan">
<div class="xiaoyuan"></div>
<div class="shudiao"></div>
</div>
</div>
<div class="top">
<div class="top-lian">
<div class="top-yan1"><div class="p1"><div class="p4"></div></div></div>
<div class="top-yan2"><div class="p2"><div class="p4"></div></div></div>
<div class="top-bi1"><div class="p5"></div></div>
<div class="bixian"> <div class="bixian2"></div></div>
<div class="top-zui">
<div class="top-zui2">
<div class="top-bi2"></div>
</div>
</div>
<div class="mao1"></div>
<div class="mao2"></div>
<div class="mao3"></div>
<div class="mao4"></div>
<div class="mao5"></div>
<div class="mao6"></div>
</div>
</div>

<div class="shengti">
<div class="shoubi1"><div class="ctou1"></div></div>
<div class="duzi">
<div class="koudai"><div class="xiaokoudai"></div></div>
</div>
<div class="shoubi2"><div class="ctou2"></div></div>
<div class="jiao1"><div class="jiaozi"></div></div>
<div class="jiao2"><div class="jiaozi"></div></div>
</div>

</div>

</body>
</html>

时间： 2024-10-11 12:43:51

纯css哆莱A梦的相关文章

纯CSS制作加&lt;div&gt;制作动画版哆啦A梦

纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS.代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可以查看一下,每个线条及椭圆都是纯CSS代码生成. 首先分析结构 根据原图,将哆啦A梦分为几个结构,然后再分解其他部位. 画出各部分的形状和颜色,然后使用绝对定位(absolute)和相对定位(relative)改变其位置. 各种带弧度形状,使用border-radius属性实现. 倾斜角度,使用transf

div+css制作哆啦A梦

纯CSS代码加上 制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS.代码,来做一个动画版的哆啦A梦. 效果图: 下面代码同学可以查看一下,每个线条及椭圆都是纯CSS代码生成. 首先分析结构 根据原图,将哆啦A梦分为几个结构,然后再分解其他部位. 画出各部分的形状和颜色,然后使用绝对定位(absolute)和相对定位(relative)改变其位置. 各种带弧度形状,使用border-radius属性实现. 倾斜角度,使用transform属性实现.

三种纯CSS方法实现等高列

在这篇文章里, 我会介绍三种使用纯css的方式来实现等高列的方法.在网页布局中设置列等高是比较常见的, 所以写这篇文章就是要总结下一些优雅的纯CSS解决方案. 插图自己弄得,不喜莫喷 哈哈.. 下面介绍的三种方法都只用到了CSS , 不涉及jQuery.JavaScript计算实现的方法,所以我把它这篇文章标题设为:三种纯CSS方法实现等高列. 方法-1: 使用Margins, Paddings和 Overflow来实现 第一种方法使用margins, paddings和overflow来迫使列

淘宝分类导航条；纯css实现固定导航栏

效果如下: 页面如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="t

【技能】使用纯CSS+html写出方向箭头，简单大方，好看

使用纯CSS+html写出方向箭头,贴出来就可以用,100%原创 <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> .pointsRule{ display: inline-blo

CSS之纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome,当然IE也能看一部分的.那好,下面就一起来看看我们是如何用纯CSS来画这些图形的,如果你也觉得很震撼,推荐给你的朋友吧. 1.正方形 最终效果: CSS代码如下: 复制代码 代码如下: #square { width: 100px; height: 100px; background: red; }

纯css实现的三级水平导航菜单

vscode练习使用开发纯css的三级水平导航菜单.先上图: 1.html5布局 1 <html> 2 3 <head> 4 <meta charset="UTF-8"> 5 <title>水平导航菜单</title> 6 <link rel="stylesheet" href="reset.css"> 7 <link rel="stylesheet"

2 纯CSS的菜单

使用纯CSS实现菜单的原理:将下拉框隐藏,当鼠标在菜单时显示隐藏的菜单. html代码: <nav> <ul> <li> <a>菜单1</a> <ul> 子菜单.... </ul> </li> </ul> </nav> 核心CSS代码 nav ul li:hover > ul { display: block; } nav li ul { display: none; positi

【转】纯CSS写三角形-border法[晋级篇01]

(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法. 最容易想到的,是叠加层.思路是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色:内层三角形绝对定位在里面.整体就能形成带边框三角形的假象. 这里就涉及到一个绝对定位的问题,上.下.左.右四种方向的三角形相对于父级定位是不同的.首先我们来看下,当定位都为0(left