码迷，mamicode.com
首页 > Web开发 > 详细

纯css哆莱A梦

时间：2016-12-14 18:24:54      阅读：191      评论：0      收藏：0      [点我收藏+]

标签：over   public   hid   class   tom   ram   纯css   www   ubi   

<!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梦

标签：over   public   hid   class   tom   ram   纯css   www   ubi   

原文地址：http://www.cnblogs.com/Xiangyon/p/6180055.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！