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