html会动的小狗狗源码

2020-03-22 19:38:16
字体：大中小
来源：转载
供稿：网友
一个纯html和css结合构建的会动的狗狗，适合自己去慢慢研究的页面，前端程序员们适合收藏哦~这样对我们的html和css技术提升也有所帮助哦！
40IS$GXTK@[89D4$5}JL2@G.png
html会动的小狗狗源码：
 !doctype html  html  head  meta charset= utf-8  title dog /title  style @-webkit-keyframes head { 0% { -webkit-transform: rotate(0); transform: rotate(0); 6.66667% { -webkit-transform: rotate(0); transform: rotate(0); 20% { -webkit-transform: rotate(-14deg); transform: rotate(-14deg); 40% { -webkit-transform: rotate(-7deg); transform: rotate(-7deg); 46.66667% { -webkit-transform: rotate(-14deg); transform: rotate(-14deg); 60% { -webkit-transform: rotate(-7deg); transform: rotate(-7deg); 73.33333% { -webkit-transform: rotate(0); transform: rotate(0); 80% { -webkit-transform: rotate(0); transform: rotate(0);@keyframes head { 0% { -webkit-transform: rotate(0); transform: rotate(0); 6.66667% { -webkit-transform: rotate(0); transform: rotate(0); 20% { -webkit-transform: rotate(-14deg); transform: rotate(-14deg); 40% { -webkit-transform: rotate(-7deg); transform: rotate(-7deg); 46.66667% { -webkit-transform: rotate(-14deg); transform: rotate(-14deg); 60% { -webkit-transform: rotate(-7deg); transform: rotate(-7deg); 73.33333% { -webkit-transform: rotate(0); transform: rotate(0); 80% { -webkit-transform: rotate(0); transform: rotate(0);@-webkit-keyframes mouth { 0% { -webkit-transform: translateX(0); transform: translateX(0); 6.66667% { -webkit-transform: translateX(0); transform: translateX(0); 13.33333% { -webkit-transform: translateX(35%); transform: translateX(35%); 20% { -webkit-transform: translateX(35%); transform: translateX(35%); 26.66667% { -webkit-transform: translateX(35%); transform: translateX(35%); 33.33333% { -webkit-transform: translateX(0) translateY(-5%); transform: translateX(0) translateY(-5%);@keyframes mouth { 0% { -webkit-transform: translateX(0); transform: translateX(0); 6.66667% { -webkit-transform: translateX(0); transform: translateX(0); 13.33333% { -webkit-transform: translateX(35%); transform: translateX(35%); 20% { -webkit-transform: translateX(35%); transform: translateX(35%); 26.66667% { -webkit-transform: translateX(35%); transform: translateX(35%); 33.33333% { -webkit-transform: translateX(0) translateY(-5%); transform: translateX(0) translateY(-5%);@-webkit-keyframes nose { 0% { -webkit-transform: translate(0); transform: translate(0); 6.66667% { -webkit-transform: translate(0); transform: translate(0); 13.33333% { -webkit-transform: translateX(100%); transform: translateX(100%); 26.66667% { -webkit-transform: translateX(100%); transform: translateX(100%); 33.33333% { -webkit-transform: translateX(0) translateY(-15%); transform: translateX(0) translateY(-15%);@keyframes nose { 0% { -webkit-transform: translate(0); transform: translate(0); 6.66667% { -webkit-transform: translate(0); transform: translate(0); 13.33333% { -webkit-transform: translateX(100%); transform: translateX(100%); 26.66667% { -webkit-transform: translateX(100%); transform: translateX(100%); 33.33333% { -webkit-transform: translateX(0) translateY(-15%); transform: translateX(0) translateY(-15%);@-webkit-keyframes body { 0% { -webkit-transform: translate(0); transform: translate(0); 6.66667% { -webkit-transform: translateY(3%); transform: translateY(3%); 13.33333% { -webkit-transform: translate(0); transform: translate(0); 20% { -webkit-transform: translate(0); transform: translate(0); 26.66667% { -webkit-transform: translateY(2%); transform: translateY(2%); 33.33333% { -webkit-transform: translateY(0); transform: translateY(0);@keyframes body { 0% { -webkit-transform: translate(0); transform: translate(0); 6.66667% { -webkit-transform: translateY(3%); transform: translateY(3%); 13.33333% { -webkit-transform: translate(0); transform: translate(0); 20% { -webkit-transform: translate(0); transform: translate(0); 26.66667% { -webkit-transform: translateY(2%); transform: translateY(2%); 33.33333% { -webkit-transform: translateY(0); transform: translateY(0);@-webkit-keyframes mane { 0% { -webkit-transform: translate(0); transform: translate(0); 6.66667% { -webkit-transform: translateY(5%); transform: translateY(5%); 13.33333% { -webkit-transform: translate(0); transform: translate(0); 20% { -webkit-transform: translate(0); transform: translate(0); 26.66667% { -webkit-transform: translateY(3%); transform: translateY(3%); 33.33333% { -webkit-transform: translateY(0); transform: translateY(0);@keyframes mane { 0% { -webkit-transform: translate(0); transform: translate(0); 6.66667% { -webkit-transform: translateY(5%); transform: translateY(5%); 13.33333% { -webkit-transform: translate(0); transform: translate(0); 20% { -webkit-transform: translate(0); transform: translate(0); 26.66667% { -webkit-transform: translateY(3%); transform: translateY(3%); 33.33333% { -webkit-transform: translateY(0); transform: translateY(0);@-webkit-keyframes face { 0% { -webkit-transform: translate(0); transform: translate(0); 6.66667% { -webkit-transform: translate(0); transform: translate(0); 13.33333% { -webkit-transform: translateX(15%); transform: translateX(15%); 20% { -webkit-transform: translateX(15%) translateY(0); transform: translateX(15%) translateY(0); 26.66667% { -webkit-transform: translateX(15%) translateY(0); transform: translateX(15%) translateY(0); 33.33333% { -webkit-transform: translateX(0) translateY(-15%); transform: translateX(0) translateY(-15%); 40% { -webkit-transform: translateX(0) translateY(-15%); transform: translateX(0) translateY(-15%); 46.66667% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0);@keyframes face { 0% { -webkit-transform: translate(0); transform: translate(0); 6.66667% { -webkit-transform: translate(0); transform: translate(0); 13.33333% { -webkit-transform: translateX(15%); transform: translateX(15%); 20% { -webkit-transform: translateX(15%) translateY(0); transform: translateX(15%) translateY(0); 26.66667% { -webkit-transform: translateX(15%) translateY(0); transform: translateX(15%) translateY(0); 33.33333% { -webkit-transform: translateX(0) translateY(-15%); transform: translateX(0) translateY(-15%); 40% { -webkit-transform: translateX(0) translateY(-15%); transform: translateX(0) translateY(-15%); 46.66667% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0);@-webkit-keyframes left-eye { 2.66667% { -webkit-transform: scaleY(1); transform: scaleY(1); 3.33333% { -webkit-transform: scaleY(0.3); transform: scaleY(0.3); 4% { -webkit-transform: scaleY(1); transform: scaleY(1); 6.66667% { -webkit-transform: translateX(0); transform: translateX(0); 9.33333% { -webkit-transform: scaleY(1) translateX(75%); transform: scaleY(1) translateX(75%); 10% { -webkit-transform: scaleY(0.3) translateX(75%); transform: scaleY(0.3) translateX(75%); 10.66667% { -webkit-transform: scaleY(1) translateX(75%); transform: scaleY(1) translateX(75%); 13.33333% { -webkit-transform: translateX(150%); transform: translateX(150%); 22% { -webkit-transform: scaleY(1) translateX(150%); transform: scaleY(1) translateX(150%); 22.66667% { -webkit-transform: scaleY(0.3) translateX(150%); transform: scaleY(0.3) translateX(150%); 23.33333% { -webkit-transform: scaleY(1) translateX(150%); transform: scaleY(1) translateX(150%); 25.33333% { -webkit-transform: scaleY(1) translateX(150%); transform: scaleY(1) translateX(150%); 26% { -webkit-transform: scaleY(0.3) translateX(150%); transform: scaleY(0.3) translateX(150%); 26.66667% { -webkit-transform: scaleY(1) translateX(150%); transform: scaleY(1) translateX(150%); 33.33333% { -webkit-transform: translateX(0) translateY(-170%); transform: translateX(0) translateY(-170%); 36% { -webkit-transform: scaleY(1) translateY(-170%); transform: scaleY(1) translateY(-170%); 36.66667% { -webkit-transform: scaleY(0.3) translateY(-170%); transform: scaleY(0.3) translateY(-170%); 37.33333% { -webkit-transform: scaleY(1) translateY(-170%); transform: scaleY(1) translateY(-170%); 38% { -webkit-transform: scaleY(1) translateY(-170%); transform: scaleY(1) translateY(-170%); 38.66667% { -webkit-transform: scaleY(0.3) translateY(-170%); transform: scaleY(0.3) translateY(-170%); 39.33333% { -webkit-transform: scaleY(1) translateY(-170%); transform: scaleY(1) translateY(-170%); 53.33333% { -webkit-transform: translateY(0); transform: translateY(0); 65.33333% { -webkit-transform: scaleY(1) translateY(0); transform: scaleY(1) translateY(0); 66% { -webkit-transform: scaleY(0.3) translateY(0); transform: scaleY(0.3) translateY(0); 66.66667% { -webkit-transform: scaleY(1) translateY(0); transform: scaleY(1) translateY(0); 70% { -webkit-transform: scaleY(1) translateY(0); transform: scaleY(1) translateY(0); 70.66667% { -webkit-transform: scaleY(0.3) translateY(0); transform: scaleY(0.3) translateY(0); 71.33333% { -webkit-transform: scaleY(1) translateY(0); transform: scaleY(1) translateY(0);@keyframes left-eye { 2.66667% { -webkit-transform: scaleY(1); transform: scaleY(1); 3.33333% { -webkit-transform: scaleY(0.3); transform: scaleY(0.3); 4% { -webkit-transform: scaleY(1); transform: scaleY(1); 6.66667% { -webkit-transform: translateX(0); transform: translateX(0); 9.33333% { -webkit-transform: scaleY(1) translateX(75%); transform: scaleY(1) translateX(75%); 10% { -webkit-transform: scaleY(0.3) translateX(75%); transform: scaleY(0.3) translateX(75%); 10.66667% { -webkit-transform: scaleY(1) translateX(75%); transform: scaleY(1) translateX(75%); 13.33333% { -webkit-transform: translateX(150%); transform: translateX(150%); 22% { -webkit-transform: scaleY(1) translateX(150%); transform: scaleY(1) translateX(150%); 22.66667% { -webkit-transform: scaleY(0.3) translateX(150%); transform: scaleY(0.3) translateX(150%); 23.33333% { -webkit-transform: scaleY(1) translateX(150%); transform: scaleY(1) translateX(150%); 25.33333% { -webkit-transform: scaleY(1) translateX(150%); transform: scaleY(1) translateX(150%); 26% { -webkit-transform: scaleY(0.3) translateX(150%); transform: scaleY(0.3) translateX(150%); 26.66667% { -webkit-transform: scaleY(1) translateX(150%); transform: scaleY(1) translateX(150%); 33.33333% { -webkit-transform: translateX(0) translateY(-170%); transform: translateX(0) translateY(-170%); 36% { -webkit-transform: scaleY(1) translateY(-170%); transform: scaleY(1) translateY(-170%); 36.66667% { -webkit-transform: scaleY(0.3) translateY(-170%); transform: scaleY(0.3) translateY(-170%); 37.33333% { -webkit-transform: scaleY(1) translateY(-170%); transform: scaleY(1) translateY(-170%); 38% { -webkit-transform: scaleY(1) translateY(-170%); transform: scaleY(1) translateY(-170%); 38.66667% { -webkit-transform: scaleY(0.3) translateY(-170%); transform: scaleY(0.3) translateY(-170%); 39.33333% { -webkit-transform: scaleY(1) translateY(-170%); transform: scaleY(1) translateY(-170%); 53.33333% { -webkit-transform: translateY(0); transform: translateY(0); 65.33333% { -webkit-transform: scaleY(1) translateY(0); transform: scaleY(1) translateY(0); 66% { -webkit-transform: scaleY(0.3) translateY(0); transform: scaleY(0.3) translateY(0); 66.66667% { -webkit-transform: scaleY(1) translateY(0); transform: scaleY(1) translateY(0); 70% { -webkit-transform: scaleY(1) translateY(0); transform: scaleY(1) translateY(0); 70.66667% { -webkit-transform: scaleY(0.3) translateY(0); transform: scaleY(0.3) translateY(0); 71.33333% { -webkit-transform: scaleY(1) translateY(0); transform: scaleY(1) translateY(0);@-webkit-keyframes right-eye { 2.66667% { -webkit-transform: scaleY(1); transform: scaleY(1); 3.33333% { -webkit-transform: scaleY(0.3); transform: scaleY(0.3); 4% { -webkit-transform: scaleY(1); transform: scaleY(1); 6.66667% { -webkit-transform: translateX(0); transform: translateX(0); 9.33333% { -webkit-transform: scaleY(1) translateX(75%); transform: scaleY(1) translateX(75%); 10% { -webkit-transform: scaleY(0.3) translateX(75%); transform: scaleY(0.3) translateX(75%); 10.66667% { -webkit-transform: scaleY(1) translateX(75%); transform: scaleY(1) translateX(75%); 13.33333% { -webkit-transform: translateX(150%); transform: translateX(150%); 22% { -webkit-transform: scaleY(1) translateX(150%); transform: scaleY(1) translateX(150%); 22.66667% { -webkit-transform: scaleY(0.3) translateX(150%); transform: scaleY(0.3) translateX(150%); 23.33333% { -webkit-transform: scaleY(1) translateX(150%); transform: scaleY(1) translateX(150%); 25.33333% { -webkit-transform: scaleY(1) translateX(150%); transform: scaleY(1) translateX(150%); 26% { -webkit-transform: scaleY(0.3) translateX(150%); transform: scaleY(0.3) translateX(150%); 26.66667% { -webkit-transform: scaleY(1) translateX(150%); transform: scaleY(1) translateX(150%); 33.33333% { -webkit-transform: translateX(0) translateY(-170%); transform: translateX(0) translateY(-170%); 36% { -webkit-transform: scaleY(1) translateY(-170%); transform: scaleY(1) translateY(-170%); 36.66667% { -webkit-transform: scaleY(0.3) translateY(-170%); transform: scaleY(0.3) translateY(-170%); 37.33333% { -webkit-transform: scaleY(1) translateY(-170%); transform: scaleY(1) translateY(-170%); 38% { -webkit-transform: scaleY(1) translateY(-170%); transform: scaleY(1) translateY(-170%); 38.66667% { -webkit-transform: scaleY(0.3) translateY(-170%); transform: scaleY(0.3) translateY(-170%); 39.33333% { -webkit-transform: scaleY(1) translateY(-170%); transform: scaleY(1) translateY(-170%); 53.33333% { -webkit-transform: translateY(0); transform: translateY(0); 65.33333% { -webkit-transform: scaleY(1) translateY(0); transform: scaleY(1) translateY(0); 66% { -webkit-transform: scaleY(0.3) translateY(0); transform: scaleY(0.3) translateY(0); 66.66667% { -webkit-transform: scaleY(1) translateY(0); transform: scaleY(1) translateY(0); 70% { -webkit-transform: scaleY(1) translateY(0); transform: scaleY(1) translateY(0); 70.66667% { -webkit-transform: scaleY(0.3) translateY(0); transform: scaleY(0.3) translateY(0); 71.33333% { -webkit-transform: scaleY(1) translateY(0); transform: scaleY(1) translateY(0);@keyframes right-eye { 2.66667% { -webkit-transform: scaleY(1); transform: scaleY(1); 3.33333% { -webkit-transform: scaleY(0.3); transform: scaleY(0.3); 4% { -webkit-transform: scaleY(1); transform: scaleY(1); 6.66667% { -webkit-transform: translateX(0); transform: translateX(0); 9.33333% { -webkit-transform: scaleY(1) translateX(75%); transform: scaleY(1) translateX(75%); 10% { -webkit-transform: scaleY(0.3) translateX(75%); transform: scaleY(0.3) translateX(75%); 10.66667% { -webkit-transform: scaleY(1) translateX(75%); transform: scaleY(1) translateX(75%); 13.33333% { -webkit-transform: translateX(150%); transform: translateX(150%); 22% { -webkit-transform: scaleY(1) translateX(150%); transform: scaleY(1) translateX(150%); 22.66667% { -webkit-transform: scaleY(0.3) translateX(150%); transform: scaleY(0.3) translateX(150%); 23.33333% { -webkit-transform: scaleY(1) translateX(150%); transform: scaleY(1) translateX(150%); 25.33333% { -webkit-transform: scaleY(1) translateX(150%); transform: scaleY(1) translateX(150%); 26% { -webkit-transform: scaleY(0.3) translateX(150%); transform: scaleY(0.3) translateX(150%); 26.66667% { -webkit-transform: scaleY(1) translateX(150%); transform: scaleY(1) translateX(150%); 33.33333% { -webkit-transform: translateX(0) translateY(-170%); transform: translateX(0) translateY(-170%); 36% { -webkit-transform: scaleY(1) translateY(-170%); transform: scaleY(1) translateY(-170%); 36.66667% { -webkit-transform: scaleY(0.3) translateY(-170%); transform: scaleY(0.3) translateY(-170%); 37.33333% { -webkit-transform: scaleY(1) translateY(-170%); transform: scaleY(1) translateY(-170%); 38% { -webkit-transform: scaleY(1) translateY(-170%); transform: scaleY(1) translateY(-170%); 38.66667% { -webkit-transform: scaleY(0.3) translateY(-170%); transform: scaleY(0.3) translateY(-170%); 39.33333% { -webkit-transform: scaleY(1) translateY(-170%); transform: scaleY(1) translateY(-170%); 53.33333% { -webkit-transform: translateY(0); transform: translateY(0); 65.33333% { -webkit-transform: scaleY(1) translateY(0); transform: scaleY(1) translateY(0); 66% { -webkit-transform: scaleY(0.3) translateY(0); transform: scaleY(0.3) translateY(0); 66.66667% { -webkit-transform: scaleY(1) translateY(0); transform: scaleY(1) translateY(0); 70% { -webkit-transform: scaleY(1) translateY(0); transform: scaleY(1) translateY(0); 70.66667% { -webkit-transform: scaleY(0.3) translateY(0); transform: scaleY(0.3) translateY(0); 71.33333% { -webkit-transform: scaleY(1) translateY(0); transform: scaleY(1) translateY(0);@-webkit-keyframes tongue { 46.66667% { -webkit-transform: translateY(0); transform: translateY(0); 53.33333% { -webkit-transform: translateY(100%) rotate(10deg); transform: translateY(100%) rotate(10deg); 73.33333% { -webkit-transform: translateY(100%) rotate(10deg); transform: translateY(100%) rotate(10deg); 80% { -webkit-transform: translateY(0); transform: translateY(0);@keyframes tongue { 46.66667% { -webkit-transform: translateY(0); transform: translateY(0); 53.33333% { -webkit-transform: translateY(100%) rotate(10deg); transform: translateY(100%) rotate(10deg); 73.33333% { -webkit-transform: translateY(100%) rotate(10deg); transform: translateY(100%) rotate(10deg); 80% { -webkit-transform: translateY(0); transform: translateY(0);@-webkit-keyframes mouth-cover-left { 40% { -webkit-transform: rotate(0); transform: rotate(0); 60% { -webkit-transform: rotate(90deg); transform: rotate(90deg); 73.33333% { -webkit-transform: rotate(90deg); transform: rotate(90deg); 86.66667% { -webkit-transform: rotate(0); transform: rotate(0);@keyframes mouth-cover-left { 40% { -webkit-transform: rotate(0); transform: rotate(0); 60% { -webkit-transform: rotate(90deg); transform: rotate(90deg); 73.33333% { -webkit-transform: rotate(90deg); transform: rotate(90deg); 86.66667% { -webkit-transform: rotate(0); transform: rotate(0);@-webkit-keyframes mouth-cover-right { 40% { -webkit-transform: rotate(0); transform: rotate(0); 60% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); 73.33333% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); 86.66667% { -webkit-transform: rotate(0); transform: rotate(0);@keyframes mouth-cover-right { 40% { -webkit-transform: rotate(0); transform: rotate(0); 60% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); 73.33333% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); 86.66667% { -webkit-transform: rotate(0); transform: rotate(0);@-webkit-keyframes tail { 6.66667% { -webkit-transform: rotate(0); transform: rotate(0); 10% { -webkit-transform: rotate(30deg); transform: rotate(30deg); 13.33333% { -webkit-transform: rotate(0); transform: rotate(0); 20% { -webkit-transform: rotate(0); transform: rotate(0); 26.66667% { -webkit-transform: rotate(30deg); transform: rotate(30deg); 46.66667% { -webkit-transform: rotate(30deg); transform: rotate(30deg); 48.33333% { -webkit-transform: rotate(0); transform: rotate(0); 50% { -webkit-transform: rotate(28deg); transform: rotate(28deg); 50.83333% { -webkit-transform: rotate(0); transform: rotate(0); 51.66667% { -webkit-transform: rotate(28deg); transform: rotate(28deg); 52.5% { -webkit-transform: rotate(0); transform: rotate(0); 53.33333% { -webkit-transform: rotate(28deg); transform: rotate(28deg); 54.16667% { -webkit-transform: rotate(0); transform: rotate(0); 55% { -webkit-transform: rotate(28deg); transform: rotate(28deg); 55.83333% { -webkit-transform: rotate(0); transform: rotate(0); 56.66667% { -webkit-transform: rotate(28deg); transform: rotate(28deg); 57.5% { -webkit-transform: rotate(0); transform: rotate(0); 58.33333% { -webkit-transform: rotate(28deg); transform: rotate(28deg); 59.16667% { -webkit-transform: rotate(0); transform: rotate(0); 60% { -webkit-transform: rotate(28deg); transform: rotate(28deg); 60.83333% { -webkit-transform: rotate(0); transform: rotate(0); 61.66667% { -webkit-transform: rotate(28deg); transform: rotate(28deg); 62.5% { -webkit-transform: rotate(0); transform: rotate(0); 63.33333% { -webkit-transform: rotate(28deg); transform: rotate(28deg); 64.16667% { -webkit-transform: rotate(0); transform: rotate(0); 65% { -webkit-transform: rotate(28deg); transform: rotate(28deg); 65.83333% { -webkit-transform: rotate(0); transform: rotate(0); 66.66667% { -webkit-transform: rotate(28deg); transform: rotate(28deg); 67.5% { -webkit-transform: rotate(0); transform: rotate(0); 68.33333% { -webkit-transform: rotate(28deg); transform: rotate(28deg); 69.16667% { -webkit-transform: rotate(0); transform: rotate(0); 70% { -webkit-transform: rotate(28deg); transform: rotate(28deg); 70.83333% { -webkit-transform: rotate(0); transform: rotate(0); 71.66667% { -webkit-transform: rotate(28deg); transform: rotate(28deg); 72.5% { -webkit-transform: rotate(0); transform: rotate(0);@keyframes tail { 6.66667% { -webkit-transform: rotate(0); transform: rotate(0); 10% { -webkit-transform: rotate(30deg); transform: rotate(30deg); 13.33333% { -webkit-transform: rotate(0); transform: rotate(0); 20% { -webkit-transform: rotate(0); transform: rotate(0); 26.66667% { -webkit-transform: rotate(30deg); transform: rotate(30deg); 46.66667% { -webkit-transform: rotate(30deg); transform: rotate(30deg); 48.33333% { -webkit-transform: rotate(0); transform: rotate(0); 50% { -webkit-transform: rotate(28deg); transform: rotate(28deg); 50.83333% { -webkit-transform: rotate(0); transform: rotate(0); 51.66667% { -webkit-transform: rotate(28deg); transform: rotate(28deg); 52.5% { -webkit-transform: rotate(0); transform: rotate(0); 53.33333% { -webkit-transform: rotate(28deg); transform: rotate(28deg); 54.16667% { -webkit-transform: rotate(0); transform: rotate(0); 55% { -webkit-transform: rotate(28deg); transform: rotate(28deg); 55.83333% { -webkit-transform: rotate(0); transform: rotate(0); 56.66667% { -webkit-transform: rotate(28deg); transform: rotate(28deg); 57.5% { -webkit-transform: rotate(0); transform: rotate(0); 58.33333% { -webkit-transform: rotate(28deg); transform: rotate(28deg); 59.16667% { -webkit-transform: rotate(0); transform: rotate(0); 60% { -webkit-transform: rotate(28deg); transform: rotate(28deg); 60.83333% { -webkit-transform: rotate(0); transform: rotate(0); 61.66667% { -webkit-transform: rotate(28deg); transform: rotate(28deg); 62.5% { -webkit-transform: rotate(0); transform: rotate(0); 63.33333% { -webkit-transform: rotate(28deg); transform: rotate(28deg); 64.16667% { -webkit-transform: rotate(0); transform: rotate(0); 65% { -webkit-transform: rotate(28deg); transform: rotate(28deg); 65.83333% { -webkit-transform: rotate(0); transform: rotate(0); 66.66667% { -webkit-transform: rotate(28deg); transform: rotate(28deg); 67.5% { -webkit-transform: rotate(0); transform: rotate(0); 68.33333% { -webkit-transform: rotate(28deg); transform: rotate(28deg); 69.16667% { -webkit-transform: rotate(0); transform: rotate(0); 70% { -webkit-transform: rotate(28deg); transform: rotate(28deg); 70.83333% { -webkit-transform: rotate(0); transform: rotate(0); 71.66667% { -webkit-transform: rotate(28deg); transform: rotate(28deg); 72.5% { -webkit-transform: rotate(0); transform: rotate(0);@-webkit-keyframes left-ear { 0% { -webkit-transform: rotate(6deg); transform: rotate(6deg); 6.66667% { -webkit-transform: rotate(6deg); transform: rotate(6deg); 13.33333% { -webkit-transform: rotate(15deg); transform: rotate(15deg); 26.66667% { -webkit-transform: rotate(15deg); transform: rotate(15deg); 33.33333% { -webkit-transform: rotate(30deg); transform: rotate(30deg); 40% { -webkit-transform: rotate(30deg); transform: rotate(30deg); 46.66667% { -webkit-transform: rotate(0deg); transform: rotate(0deg); 53.33333% { -webkit-transform: rotate(0deg); transform: rotate(0deg); 60% { -webkit-transform: rotate(15deg); transform: rotate(15deg); 80% { -webkit-transform: rotate(15deg); transform: rotate(15deg); 93.33333% { -webkit-transform: rotate(6deg); transform: rotate(6deg); 100% { -webkit-transform: rotateZ(6deg); transform: rotateZ(6deg);@keyframes left-ear { 0% { -webkit-transform: rotate(6deg); transform: rotate(6deg); 6.66667% { -webkit-transform: rotate(6deg); transform: rotate(6deg); 13.33333% { -webkit-transform: rotate(15deg); transform: rotate(15deg); 26.66667% { -webkit-transform: rotate(15deg); transform: rotate(15deg); 33.33333% { -webkit-transform: rotate(30deg); transform: rotate(30deg); 40% { -webkit-transform: rotate(30deg); transform: rotate(30deg); 46.66667% { -webkit-transform: rotate(0deg); transform: rotate(0deg); 53.33333% { -webkit-transform: rotate(0deg); transform: rotate(0deg); 60% { -webkit-transform: rotate(15deg); transform: rotate(15deg); 80% { -webkit-transform: rotate(15deg); transform: rotate(15deg); 93.33333% { -webkit-transform: rotate(6deg); transform: rotate(6deg); 100% { -webkit-transform: rotateZ(6deg); transform: rotateZ(6deg);@-webkit-keyframes right-ear { 0% { -webkit-transform: rotateZ(-16deg) rotateY(180deg); transform: rotateZ(-16deg) rotateY(180deg); 6.66667% { -webkit-transform: rotateZ(-16deg) rotateY(180deg); transform: rotateZ(-16deg) rotateY(180deg); 13.33333% { -webkit-transform: rotateZ(-19deg) rotateY(180deg); transform: rotateZ(-19deg) rotateY(180deg); 26.66667% { -webkit-transform: rotateZ(-19deg) rotateY(180deg); transform: rotateZ(-19deg) rotateY(180deg); 33.33333% { -webkit-transform: rotateZ(-30deg) rotateY(180deg); transform: rotateZ(-30deg) rotateY(180deg); 36.66667% { -webkit-transform: rotateZ(-19deg) rotateY(180deg); transform: rotateZ(-19deg) rotateY(180deg); 37.33333% { -webkit-transform: rotateZ(-30deg) rotateY(180deg); transform: rotateZ(-30deg) rotateY(180deg); 38% { -webkit-transform: rotateZ(-19deg) rotateY(180deg); transform: rotateZ(-19deg) rotateY(180deg); 40% { -webkit-transform: rotateZ(-19deg) rotateY(180deg); transform: rotateZ(-19deg) rotateY(180deg); 40.66667% { -webkit-transform: rotateZ(-30deg) rotateY(180deg); transform: rotateZ(-30deg) rotateY(180deg); 41.33333% { -webkit-transform: rotateZ(-19deg) rotateY(180deg); transform: rotateZ(-19deg) rotateY(180deg); 46.66667% { -webkit-transform: rotateZ(-9deg) rotateY(180deg); transform: rotateZ(-9deg) rotateY(180deg); 53.33333% { -webkit-transform: rotateZ(-9deg) rotateY(180deg); transform: rotateZ(-9deg) rotateY(180deg); 60% { -webkit-transform: rotateZ(-19deg) rotateY(180deg); transform: rotateZ(-19deg) rotateY(180deg); 60.66667% { -webkit-transform: rotateZ(-30deg) rotateY(180deg); transform: rotateZ(-30deg) rotateY(180deg); 61.33333% { -webkit-transform: rotateZ(-19deg) rotateY(180deg); transform: rotateZ(-19deg) rotateY(180deg); 62.66667% { -webkit-transform: rotateZ(-19deg) rotateY(180deg); transform: rotateZ(-19deg) rotateY(180deg); 63.33333% { -webkit-transform: rotateZ(-30deg) rotateY(180deg); transform: rotateZ(-30deg) rotateY(180deg); 64% { -webkit-transform: rotateZ(-19deg) rotateY(180deg); transform: rotateZ(-19deg) rotateY(180deg); 80% { -webkit-transform: rotateZ(-19deg) rotateY(180deg); transform: rotateZ(-19deg) rotateY(180deg); 93.33333% { -webkit-transform: rotateZ(-16deg) rotateY(180deg); transform: rotateZ(-16deg) rotateY(180deg); 100% { -webkit-transform: rotateZ(-16deg) rotateY(180deg); transform: rotateZ(-16deg) rotateY(180deg);@keyframes right-ear { 0% { -webkit-transform: rotateZ(-16deg) rotateY(180deg); transform: rotateZ(-16deg) rotateY(180deg); 6.66667% { -webkit-transform: rotateZ(-16deg) rotateY(180deg); transform: rotateZ(-16deg) rotateY(180deg); 13.33333% { -webkit-transform: rotateZ(-19deg) rotateY(180deg); transform: rotateZ(-19deg) rotateY(180deg); 26.66667% { -webkit-transform: rotateZ(-19deg) rotateY(180deg); transform: rotateZ(-19deg) rotateY(180deg); 33.33333% { -webkit-transform: rotateZ(-30deg) rotateY(180deg); transform: rotateZ(-30deg) rotateY(180deg); 36.66667% { -webkit-transform: rotateZ(-19deg) rotateY(180deg); transform: rotateZ(-19deg) rotateY(180deg); 37.33333% { -webkit-transform: rotateZ(-30deg) rotateY(180deg); transform: rotateZ(-30deg) rotateY(180deg); 38% { -webkit-transform: rotateZ(-19deg) rotateY(180deg); transform: rotateZ(-19deg) rotateY(180deg); 40% { -webkit-transform: rotateZ(-19deg) rotateY(180deg); transform: rotateZ(-19deg) rotateY(180deg); 40.66667% { -webkit-transform: rotateZ(-30deg) rotateY(180deg); transform: rotateZ(-30deg) rotateY(180deg); 41.33333% { -webkit-transform: rotateZ(-19deg) rotateY(180deg); transform: rotateZ(-19deg) rotateY(180deg); 46.66667% { -webkit-transform: rotateZ(-9deg) rotateY(180deg); transform: rotateZ(-9deg) rotateY(180deg); 53.33333% { -webkit-transform: rotateZ(-9deg) rotateY(180deg); transform: rotateZ(-9deg) rotateY(180deg); 60% { -webkit-transform: rotateZ(-19deg) rotateY(180deg); transform: rotateZ(-19deg) rotateY(180deg); 60.66667% { -webkit-transform: rotateZ(-30deg) rotateY(180deg); transform: rotateZ(-30deg) rotateY(180deg); 61.33333% { -webkit-transform: rotateZ(-19deg) rotateY(180deg); transform: rotateZ(-19deg) rotateY(180deg); 62.66667% { -webkit-transform: rotateZ(-19deg) rotateY(180deg); transform: rotateZ(-19deg) rotateY(180deg); 63.33333% { -webkit-transform: rotateZ(-30deg) rotateY(180deg); transform: rotateZ(-30deg) rotateY(180deg); 64% { -webkit-transform: rotateZ(-19deg) rotateY(180deg); transform: rotateZ(-19deg) rotateY(180deg); 80% { -webkit-transform: rotateZ(-19deg) rotateY(180deg); transform: rotateZ(-19deg) rotateY(180deg); 93.33333% { -webkit-transform: rotateZ(-16deg) rotateY(180deg); transform: rotateZ(-16deg) rotateY(180deg); 100% { -webkit-transform: rotateZ(-16deg) rotateY(180deg); transform: rotateZ(-16deg) rotateY(180deg);*, *:before, *:after { -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) !important; animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) !important;.husky { -webkit-animation: squiggly-anim 0.3s infinite; animation: squiggly-anim 0.3s infinite; height: 60vmin; width: 84vmin;@media screen and (max-width: 400px) { .husky { -webkit-animation: none; animation: none;.husky:before { width: 90%; height: 0.5vmin; background: #30508F; border-radius: 0.5vmin; top: 100%; left: 5%; z-index: 2;.husky:after { width: 100%; height: 10%; top: calc(100% + 0.5vmin); z-index: 3; background: #4F8EDB;p:before, p:after { content:  display: block; position: absolute;.head { -webkit-animation: head 12s none infinite; animation: head 12s none infinite; position: absolute; height: 45%; width: 58%; left: 34%; top: 5%; -webkit-transform-origin: bottom center; transform-origin: bottom center;.head:before { background: #30508F; border-top-left-radius: 50% 40%; border-top-right-radius: 50% 40%; border-bottom-right-radius: 10% 60%; height: 100%; width: 100%;.face { -webkit-animation: face 12s none infinite; animation: face 12s none infinite; position: absolute; width: 98%; height: 62%; top: 15%; left: 2%;.face:before { z-index: 1; width: 94%; height: 70%; left: 3%; background-color: white; bottom: 5%; border-top-left-radius: 40% 50%; border-top-right-radius: 40% 50%; border-bottom-left-radius: 30% 50%; border-bottom-right-radius: 30% 40%;.eye { -webkit-animation: eyes 12s none infinite; animation: eyes 12s none infinite; position: absolute; width: 30%; height: 40%; background-color: white; right: 45%; border-top-left-radius: 55% 50%; border-top-right-radius: 45% 50%; z-index: 2;.eye:before { -webkit-animation: left-eye 12s none infinite; animation: left-eye 12s none infinite; height: 15%; width: 15%; border-radius: 100%; background: #343C60; top: 45%; left: 45%; -webkit-transform-origin: center center; transform-origin: center center;.eye + .eye { z-index: 1; right: initial; left: 48%; border-top-right-radius: 55% 50%; border-top-left-radius: 45% 50%;.nose { -webkit-animation: nose 12s none infinite; animation: nose 12s none infinite; z-index: 2; position: absolute; width: 20%; height: 20%; top: 29%; left: 42%;.nose:after { background: #30508F; height: 100%; width: 100%; border-top-left-radius: 20% 20%; border-top-right-radius: 30% 20%; border-bottom-right-radius: 55% 80%; border-bottom-left-radius: 50% 80%;.nose:before { height: 100%; width: 200%; background: white; top: 50%; left: -50%; z-index: -1; border-radius: 50%;.ear { -webkit-animation: left-ear 12s both infinite; animation: left-ear 12s both infinite; position: absolute; top: 3%; left: -10%; width: 48%; height: 30%; border-bottom-left-radius: 100% 90%; border-top-left-radius: 10%; -webkit-transform-origin: 80% center; transform-origin: 80% center; overflow: hidden; background: #30508F;.ear:before { width: 70%; height: 55%; border: 2px solid #30508F; background: #DE6465; top: 20%; left: 15%; -webkit-transform-origin: top left; transform-origin: top left; -webkit-transform: skewX(30deg) rotate(-5deg); transform: skewX(30deg) rotate(-5deg);.ear:after { width: 70%; height: 100%; border-top-left-radius: 100%; background: #30508F; left: 32%; -webkit-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(-5deg); transform: rotate(-5deg);.ear + .ear { -webkit-animation: right-ear 12s both infinite; animation: right-ear 12s both infinite; background-color: #343C60; left: 15%; top: 5%; z-index: -1; -webkit-transform-origin: right center; transform-origin: right center;.ear + .ear:before { border-color: #343C60;.ear + .ear:after { background: #343C60;.mouth { z-index: 1; -webkit-animation: mouth 12s none infinite; animation: mouth 12s none infinite; position: absolute; width: 48%; height: 55%; bottom: -5%; left: 28%; overflow: hidden;.mouth:before, .mouth:after { -webkit-animation: mouth-cover-left 12s none infinite; animation: mouth-cover-left 12s none infinite; width: 28%; height: 100%; background: white; top: -50%; left: 0; z-index: 3; -webkit-transform-origin: right top; transform-origin: right top;.mouth:after { -webkit-animation: mouth-cover-right 12s none infinite; animation: mouth-cover-right 12s none infinite; left: initial; right: 0; -webkit-transform-origin: left top; transform-origin: left top;.lips { z-index: 2; height: 35%; width: 100%;.lips:before, .lips:after { background: white; width: calc(50% + 1.5px); border-color: #9EB6D7; border-width: 3px; border-style: solid; height: 100%; border-bottom-left-radius: 65% 100%; border-bottom-right-radius: 35% 50%; border-top-right-radius: 50%; border-right-color: transparent; border-top-color: transparent;.lips:after { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); left: initial; right: 0;.tongue { -webkit-animation: tongue 12s none infinite; animation: tongue 12s none infinite; position: absolute; height: 100%; width: 44%; background: #DE6465; left: 25%; bottom: 100%; z-index: 1; border-bottom-left-radius: 50% 20%; border-bottom-right-radius: 50% 20%;.body { -webkit-animation: body 12s none infinite; animation: body 12s none infinite; width: 45%; height: 100%; position: absolute; left: 25%;.torso { position: absolute; height: 55%; width: 100%; bottom: 0;.torso:before { background: #30508F; height: 100%; width: 50%; -webkit-transform: translateX(-20%) skewX(-30deg); transform: translateX(-20%) skewX(-30deg); -webkit-transform-origin: left bottom; transform-origin: left bottom; border-radius: 0 30% 0 60%;.torso:after { background: #30508F; height: 100%; width: 60%; top: 0; right: 0; border-radius: 10% 40% 60% 0;.mane { -webkit-animation: mane 12s none infinite; animation: mane 12s none infinite; z-index: 2; position: absolute; width: 31.5%; height: 30%; top: 44%; left: 37%;.mane:before { background: white; height: 40%; width: 100%; border-top-left-radius: 10% 50%; border-top-right-radius: 20% 100%; border-bottom-left-radius: 10% 50%;.mane:after { background: white; top: 25%; height: 76%; width: 30%; right: 23%; border-top-right-radius: 100% 80%; -webkit-transform: rotate(47deg); transform: rotate(47deg); -webkit-transform-origin: bottom right; transform-origin: bottom right;.coat { position: absolute; width: 50%; height: 50%; background: white; -webkit-transform-origin: bottom right; transform-origin: bottom right; left: 10%; top: 21%; -webkit-transform: rotate(25deg) skewX(-30deg); transform: rotate(25deg) skewX(-30deg);.legs { background-color: #30508F; position: absolute; height: 30%; width: 42%; left: 23%; bottom: 0; border-top-left-radius: 20% 37%; border-bottom-left-radius: 10% 37%; border-top-right-radius: 50%; z-index: 1;.front-legs { position: absolute; width: 55%; height: 117%; bottom: 0; right: -12%;.front-legs:before { width: 4%; height: 6%; background: transparent; bottom: 0; left: 47%; box-shadow: -1.3vmin 0 0 #9EB6D7, -2.8vmin 0 0 #9EB6D7, 1.3vmin 0 0 #4F8EDB, 2.8vmin 0 0 #4F8EDB; z-index: 2;.front-legs .leg { width: 51%; height: 100%; position: absolute; bottom: 0; right: 50%; overflow: hidden;.front-legs .leg:before { background: #C8DAF2; height: 100%; width: 100%; -webkit-transform: skewY(-30deg) skewX(10deg); transform: skewY(-30deg) skewX(10deg); -webkit-transform-origin: top right; transform-origin: top right;.front-legs .leg + .leg { right: 0; -webkit-transform: rotateY(180deg); transform: rotateY(180deg);.front-legs .leg + .leg:before { background: #9EB6D7;.hind-leg { position: absolute; background: #9EB6D7; width: 35%; height: 25%; border-top-left-radius: 35% 100%; border-top-right-radius: 40% 100%; bottom: 0%; right: 45%;.hind-leg:before { width: 6%; height: 20%; background: transparent; bottom: 0; left: 70%; box-shadow: -0.8vmin 0 0 #4F8EDB, 0.8vmin 0 0 #4F8EDB;.tail { position: absolute; width: 15%; height: 6%; bottom: 0; right: 72%; background: #343C60; z-index: 0;.tail .tail { -webkit-animation: tail 12s none infinite; animation: tail 12s none infinite; height: 100%; width: 4vmin; right: 26%; -webkit-transform-origin: center right; transform-origin: center right; border-top-left-radius: 50% 50%; border-bottom-left-radius: 50% 50%; -webkit-transform: rotate(26deg); transform: rotate(26deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);.husky .tail { border-top-left-radius: 10% 50%; border-bottom-left-radius: 10% 50%;.husky .tail .tail { right: 88%;@-webkit-keyframes squiggly-anim { 0% { -webkit-filter: url( #squiggly-0  filter: url( #squiggly-0  25% { -webkit-filter: url( #squiggly-1  filter: url( #squiggly-1  50% { -webkit-filter: url( #squiggly-2  filter: url( #squiggly-2  75% { -webkit-filter: url( #squiggly-3  filter: url( #squiggly-3  100% { -webkit-filter: url( #squiggly-4  filter: url( #squiggly-4 @keyframes squiggly-anim { 0% { -webkit-filter: url( #squiggly-0  filter: url( #squiggly-0  25% { -webkit-filter: url( #squiggly-1  filter: url( #squiggly-1  50% { -webkit-filter: url( #squiggly-2  filter: url( #squiggly-2  75% { -webkit-filter: url( #squiggly-3  filter: url( #squiggly-3  100% { -webkit-filter: url( #squiggly-4  filter: url( #squiggly-4 html, body { background-repeat: no-repeat; background-size: contain; background-position: center center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #4F8EDB; width: 100%; height: 100%; margin: 0; padding: 0;*, *:before, *:after { box-sizing: border-box; position: relative;on-left{ position:absolute;  right:0;  bottom:0;  width:100% /style  /head  body  p >免费拿去用把，记得要多研究研究哦！
相关推荐：
html和css中常见的浏览器兼容性问题
10款好用的html编辑器
用html5和css3写出登录页面教程
以上就是html会动的小狗狗源码的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。