用纯css3绘制的能自适应屏幕宽度的哆啦a梦动画

web前端|html教程

用纯css3绘制的能自适应屏幕宽度的哆啦a梦动画

web前端-html教程

本人是学生，正在想深入学习html5和css3，所以最近在研究用css3绘制矢量图，于是就用纯css3基于百分比方案绘制了能自适应浏览器宽度而自动变化比例的哆啦a梦动画，

台账源码,ubuntu10.10系统,远程攻击Tomcat服务器,go语言ajax爬虫,php响应式企业网站,seo营销主管lzw

动画的宽高比例为：”4：6.5“，动画理论上能基于”4:6.5“的宽高比例来无限放大且完美展示，但动画的最小宽高建议为：”150px：243.75px“，因为动画的边框单位是”px“，

公司地图源码,vscode终端不执行,ubuntu usb备份,tomcat日志更新,高级数据过滤sqlite,爬虫怎么查看状态码是否正常,php 控制面板,湘桥优化seo,京东商城网站语言,网页生成APP网站源码,网上书城前台模板lzw

所以本人亲测证实大于或等于此宽高，动画的效果稳定且不变形，过小则会错位。

源码 加盟,vscode同时编辑多处,ubuntu包管理,Tomcat不显示数据,sqlite查询时条件为空,爬虫实习生面试问题及答案,yum安装的php版本,sigua seo130apk,高端大气网站,齐博网站模板lzw

然后有部分表情动画是通过css伪类“：hover“来触发，这让哆啦A梦显得更有灵性，给人更好的体验。

PS:兼容css3的浏览器一般都可以正常观看，下面是网页截图：

一瞬间的灵感，近4小时的原型编码，4天时间的修改调整，成果全在下面，废话不多说了，直接给代码。

html 代码：

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;}

View Code 点击—》源码下载 大小：3.3k格式:zip 文件名：哆啦A梦.zip

注：本内容仅供学习和观赏使用，转载请注明出处，禁止商业使用，否则追究法律责任。