用纯css3绘制的能自适应屏幕宽度的哆啦a梦动画
程序员文章站
2022-04-24 14:45:41
...
本人是学生,正在想深入学习html5和css3,所以最近在研究用css3绘制矢量图,于是就用纯css3基于百分比方案绘制了能自适应浏览器宽度而自动变化比例的哆啦a梦动画,
View Code
动画的宽高比例为:”4:6.5“,动画理论上能基于”4:6.5“的宽高比例来无限放大且完美展示,但动画的最小宽高建议为:”150px:243.75px“,因为动画的边框单位是”px“,
所以本人亲测证实大于或等于此宽高,动画的效果稳定且不变形,过小则会错位。
然后有部分表情动画是通过css伪类“:hover“来触发,这让哆啦A梦显得更有灵性,给人更好的体验。
PS:兼容css3的浏览器一般都可以正常观看,下面是网页截图:
一瞬间的灵感,近4小时的原型编码,4天时间的修改调整,成果全在下面,废话不多说了,直接给代码。
html 代码:
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>
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; }
点击---》源码下载 大小:3.3k 格式:zip 文件名:哆啦A梦.zip
注:本内容仅供学习和观赏使用,转载请注明出处,禁止商业使用,否则追究法律责任。