首页 > 代码库 > 纯css哆莱A梦
纯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>
纯css哆莱A梦