css布局实现一个哈士奇狗狗动画效果代码
代码语言：html
所属分类：动画
代码描述：css布局实现一个哈士奇狗狗动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@-webkit-keyframes head {
0% {
transform: rotate(0);
}
6.6666666667% {
transform: rotate(0);
}
20% {
transform: rotate(-14deg);
}
40% {
transform: rotate(-7deg);
}
46.6666666667% {
transform: rotate(-14deg);
}
60% {
transform: rotate(-7deg);
}
73.3333333333% {
transform: rotate(0);
}
80% {
transform: rotate(0);
}
}
@keyframes head {
0% {
transform: rotate(0);
}
6.6666666667% {
transform: rotate(0);
}
20% {
transform: rotate(-14deg);
}
40% {
transform: rotate(-7deg);
}
46.6666666667% {
transform: rotate(-14deg);
}
60% {
transform: rotate(-7deg);
}
73.3333333333% {
transform: rotate(0);
}
80% {
transform: rotate(0);
}
}
@-webkit-keyframes mouth {
0% {
transform: translateX(0);
}
6.6666666667% {
transform: translateX(0);
}
13.3333333333% {
transform: translateX(35%);
}
20% {
transform: translateX(35%);
}
26.6666666667% {
transform: translateX(35%);
}
33.3333333333% {
transform: translateX(0) translateY(-5%);
}
}
@keyframes mouth {
0% {
transform: translateX(0);
}
6.6666666667% {
transform: translateX(0);
}
13.3333333333% {
transform: translateX(35%);
}
20% {
transform: translateX(35%);
}
26.6666666667% {
transform: translateX(35%);
}
33.3333333333% {
transform: translateX(0) translateY(-5%);
}
}
@-webkit-keyframes nose {
0% {
transform: translate(0);
}
6.6666666667% {
transform: translate(0);
}
13.3333333333% {
transform: translateX(100%);
}
26.6666666667% {
transform: translateX(100%);
}
33.3333333333% {
transform: translateX(0) translateY(-15%);
}
}
@keyframes nose {
0% {
transform: translate(0);
}
6.6666666667% {
transform: translate(0);
}
13.3333333333% {
transform: translateX(100%);
}
26.6666666667% {
transform: translateX(100%);
}
33.3333333333% {
transform: translateX(0) translateY(-15%);
}
}
@-webkit-keyframes body {
0% {
transform: translate(0);
}
6.6666666667% {
transform: translateY(3%);
}
13.3333333333% {
transform: translate(0);
}
20% {
transform: translate(0);
}
26.6666666667% {
transform: translateY(2%);
}
33.3333333333% {
transform: translateY(0);
}
}
@keyframes body {
0% {
transform: translate(0);
}
6.6666666667% {
transform: translateY(3%);
}
13.3333333333% {
transform: translate(0);
}
20% {
transform: translate(0);
}
26.6666666667% {
transform: translateY(2%);
}
33.3333333333% {
transform: translateY(0);
}
}
@-webkit-keyframes mane {
0% {
transform: translate(0);
}
6.6666666667% {
transform: translateY(5%);
}
13.3333333333% {
transform: translate(0);
}
20% {
transform: translate(0);
}
26.6666666667% {
transform: translateY(3%);
}
33.3333333333% {
transform: translateY(0);
}
}
@keyframes mane {
0% {
transform: translate(0);
}
6.6666666667% {
transform: translateY(5%);
}
13.3333333333% {
transform: translate(0);
}
20% {
transform: translate(0);
}
26.6666666667% {
transform: translateY(3%);
}
33.3333333333% {
transform: translateY(0);
}
}
@-webkit-keyframes face {
0% {
transform: translate(0);
}
6.6666666667% {
transform: translate(0);
}
13.3333333333% {
transform: translateX(15%);
}
20% {
transform: translateX(15%) translateY(0);
}
26.6666666667% {
transform: translateX(15%) translateY(0);
}
33.3333333333% {
transform: translateX(0) translateY(-15%);
}
40% {
transform: translateX(0) translateY(-15%);
}
46.6666666667% {
transform: translateX(0) translateY(0);
}
}
@keyframes face {
0% {
transform: translate(0);
}
6.6666666667% {
transform: translate(0);
}
13.3333333333% {
transform: translateX(15%);
}
20% {
transform: translateX(15%) translateY(0);
}
26.6666666667% {
transform: translateX(15%) translateY(0);
}
33.3333333333% {
transform: translateX(0) translateY(-15%);
}
40% {
transform: translateX(0) translateY(-15%);
}
46.6666666667% {
transform: translateX(0) translateY(0);
}
}
@-webkit-keyframes left-eye {
2.6666666667% {
transform: scaleY(1);
}
3.3333333333% {
transform: scaleY(0.3);
}
4% {
transform: scaleY(1);
}
6.6666666667% {
transform: translateX(0);
}
9.3333333333% {
transform: scaleY(1) translateX(75%);
}
10% {
transform: scaleY(0.3) translateX(75%);
}
10.6666666667% {
transform: scaleY(1) translateX(75%);
}
13.3333333333% {
transform: translateX(150%);
}
22% {
transform: scaleY(1) translateX(150%);
}
22.6666666667% {
transform: scaleY(0.3) translateX(150%);
}
23.3333333333% {
transform: scaleY(1) translateX(150%);
}
25.3333333333% {
transform: scaleY(1) translateX(150%);
}
26% {
transform: scaleY(0.3) translateX(150%);
}
26.6666666667% {
transform: scaleY(1) translateX(150%);
}
33.3333333333% {
transform: translateX(0) translateY(-170%);
}
36% {
transform: scaleY(1) translateY(-170%);
}
36.6666666667% {
transform: scaleY(0.3) translateY(-170%);
}
37.3333333333% {
transform: scaleY(1) translateY(-170%);
}
38% {
transform: scaleY(1) translateY(-170%);
}
38.6666666667% {
transform: scaleY(0.3) translateY(-170%);
}
39.3333333333% {
transform: scaleY(1) translateY(-170%);
}
53.3333333333% {
transform: translateY(0);
}
65.3333333333% {
transform: scaleY(1) translateY(0);
}
66% {
transform: scaleY(0.3) translateY(0);
}
66.6666666667% {
transform: scaleY(1) translateY(0);
}
70% {
transform: scaleY(1) translateY(0);
}
70.6666666667% {
transform: scaleY(0.3) translateY(0);
}
71.3333333333% {
transform: scaleY(1) translateY(0);
}
}
@keyframes left-eye {
2.6666666667% {
transform: scaleY(1);
}
3.3333333333% {
transform: scaleY(0.3);
}
4% {
transform: scaleY(1);
}
6.6666666667% {
transform: translateX(0);
}
9.3333333333% {
transform: scaleY(1) translateX(75%);
}
10% {
transform: scaleY(0.3) translateX(75%);
}
10.6666666667% {
transform: scaleY(1) translateX(75%);
}
13.3333333333% {
transform: translateX(150%);
}
22% {
transform: scaleY(1) translateX(150%);
}
22.6666666667% {
transform: scaleY(0.3) translateX(150%);
}
23.3333333333% {
transform: scaleY(1) translateX(150%);
}
25.3333333333% {
transform: scaleY(1) translateX(150%);
}
26% {
transform: scaleY(0.3) translateX(150%);
}
26.6666666667% {
transform: scaleY(1) translateX(150%);
}
33.3333333333% {
transform: translateX(0) translateY(-170%);
}
36% {
transform: scaleY(1) translateY(-170%);
}
36.6666666667% {
transform: scaleY(0.3) translateY(-170%);
}
37.3333333333% {
transform: scaleY(1) translateY(-170%);
}
38% {
transform: scaleY(1) translateY(-170%);
}
38.6666666667% {
transform: scaleY(0.3) translateY(-170%);
}
39.3333333333% {
transform: scaleY(1) translateY(-170%);
}
53.3333333333% {
transform: translateY(0);
}
65.3333333333% {
transform: scaleY(1) translateY(0);
}
66% {
transform: scaleY(0.3) translateY(0);
}
66.6666666667% {
transform: scaleY(1) translateY(0);
}
70% {
transform: scaleY(1) translateY(0);
}
70.6666666667% {
transform: scaleY(0.3) translateY(0);
}
71.3333333333% {
transform: scaleY(1) translateY(0);
}
}
@-webkit-keyframes right-eye {
2.6666666667% {
transform: scaleY(1);
}
3.3333333333% {
transform: scaleY(0.3);
}
4% {
transform: scaleY(1);
}
6.6666666667% {
transform: translateX(0);
}
9.3333333333% {
transform: scaleY(1) translateX(75%);
}
10% {
transform: scaleY(0.3) translateX(75%);
}
10.6666666667% {
transform: scaleY(1) translateX(75%);
}
13.3333333333% {
transform: translateX(150%);
}
22% {
transform: scaleY(1) translateX(150%);
}
22.6666666667% {
transform: scaleY(0.3) translateX(150%);
}
23.3333333333% {
transform: scaleY(1) translateX(150%);
}
25.3333333333% {
transform: scaleY(1) translateX(150%);
}
26% {
transform: scaleY(0.3) translateX(150%);
}
26.6666666667% {
transform: scaleY(1) translateX(150%);
}
33.3333333333% {
transform: translateX(0) translateY(-170%);
}
36% {
transform: scaleY(1) translateY(-170%);
}
36.6666666667% {
transform: scaleY(0.3) translateY(-170%);
}
37.3333333333% {
transform: scaleY(1) translateY(-170%);
}
38% {
transform: scaleY(1) translateY(-170%);
}
38.6666666667% {
transform: scaleY(0.3) translateY(-170%);
}
39.3333333333% {
transform: scaleY(1) translateY(-170%);
}
53.3333333333% {
transform: translateY(0);
}
65.3333333333% {
transform: scaleY(1) translateY(0);
}
66% {
transform: scaleY(0.3) translateY(0);
}
66.6666666667% {
transform: scaleY(1) translateY(0);
}
70% {
transform: scaleY(1) translateY(0);
}
70.6666666667% {
transform: scaleY(0.3) translateY(0);
}
71.3333333333% {
transform: scaleY(1) translateY(0);
}
}
@keyframes right-eye {
2.6666666667% {
transform: scaleY(1);
}
3.3333333333% {
transform: scaleY(0.3);
}
4% {
transform: scaleY(1);
}
6.6666666667% {
transform: translateX(0);
}
9.3333333333% {
transform: scaleY(1) translateX(75%);
}
10% {
transform: scaleY(0.3) translateX(75%);
}
10.6666666667% {
transform: scaleY(1) translateX(75%);
}
13.3333333333% {
transform: translateX(150%);
}
22% {
transform: scaleY(1) translateX(150%);
}
22.6666666667% {
transform: scaleY(0.3) translateX(150%);
}
23.3333333333% {
transform: scaleY(1) translateX(150%);
}
25.3333333333% {
transform: scaleY(1) translateX(150%);
}
26% {
transform: scaleY(0.3) translateX(150%);
}
26.6666666667% {
transform: scaleY(1) translateX(150%);
}
33.3333333333% {
transform: translateX(0) translateY(-170%);
}
36% {
transform: scaleY(1) translateY(-170%);
}
36.6666666667% {
transform: scaleY(0.3) translateY(-170%);
}
37.3333333333% {
transform: scaleY(1) translateY(-170%);
}
38% {
transform: scaleY(1) translateY(-170%);
}
38.6666666667% {
transform: scaleY(0.3) translateY(-170%);
}
39.3333333333% {
transform: scaleY(1) translateY(-170%);
}
53.3333333333% {
transform: translateY(0);
}
65.3333333333% {
transform: scaleY(1) translateY(0);
}
66% {
transform: scaleY(0.3) translateY(0);
}
66.6666666667% {
transform: scaleY(1) translateY(0);
}
70% {
transform: scaleY(1) translateY(0);
}
70.6666666667% {
transform: scaleY(0.3) translateY(0);
}
71.3333333333% {
transform: scaleY(1) translateY(0);
}
}
@-webkit-keyframes tongue {
46.6666666667% {
transform: translateY(0);
}
53.3333333333% {
transform: translateY(100%) rotate(10deg);
}
73.3333333333% {
transform: translateY(100%) rotate(10deg);
}
80% {
transform: translateY(0);
}
}
@keyframes tongue {
46.6666666667% {
transform: translateY(0);
}
53.3333333333% {
transform: translateY(100%) rotate(10deg);
}
73.3333333333% {
transform: translateY(100%) rotate(10deg);
}
80% {
transform: translateY(0);
}
}
@-webkit-keyframes mouth-cover-left {
40% {
transform: rotate(0);
}
60% {
transform: rotate(90deg);
}
73.3333333333% {
transform: rotate(90deg);
}
86.6666666667% {
transform: rotate(0);
}
}
@keyframes mouth-cover-left {
40% {
transform: rotate(0);
}
60% {
transform: rotate(90deg);
}
73.3333333333% {
transform: rotate(90deg);
}
86.6666666667% {
transform: rotate(0);
}
}
@-webkit-keyframes mouth-cover-right {
40% {
transform: rotate(0);
}
60% {
transform: rotate(-90deg);
}
73.3333333333% {
transform: rotate(-90deg);
}
86.6666666667% {
transform: rotate(0);
}
}
@keyframes mouth-cover-right {
40% {
transform: rotate(0);
}
60% {
transform: rotate(-90deg);
}
73.3333333333% {
transform: rotate(-90deg);
}
86.6666666667% {
transform: rotate(0);
}
}
@-webkit-keyframes tail {
6.6666666667% {
transform: rotate(0);
}
10% {
transform: rotate(30deg);
}
13.3333333333% {
transform: rotate(0);
}
20% {
transform: rotate(0);
}
26.6666666667% {
transform: rotate(30deg);
}
46.6666666667% {
transform: rotate(30deg);
}
48.3333333333% {
transform: rotate(0);
}
50% {
transform: rotate(28deg);
}
50.8333333333% {
transform: rotate(0);
}
51.6666666667% {
transform: rotate(28deg);
}
52.5% {
transform: rotate(0);
}
53.3333333333% {
transform: rotate(28deg);
}
54.1666666667% {
transform: rotate(0);
}
55% {
transform: rotate(28deg);
}
55.8333333333% {
transform: rotate(0);
}
56.6666666667% {
transform: rotate(28deg);
}
57.5% {
transform: rotate(0);
}
58.3333333333% {
transform: rotate(28deg);
}
59.1666666667% {
transform: rotate(0);
}
60% {
transform: rotate(28deg);
}
60.8333333333% {
transform: rotate(0);
}
61.6666666667% {
transform: rotate(28deg);
}
62.5% {
transform: rotate(0);
}
63.3333333333% {
transform: rotate(28deg);
}
64.1666666667% {
transform: rotate(0);
}
65% {
transform: rotate(28deg);
}
65.8333333333% {
transform: rotate(0);
}
66.6666666667% {
transform: rotate(28deg);
}
67.5% {
transform: rotate(0);
}
68.3333333333% {
transform: rotate(28deg);
}
69.1666666667% {
transform: rotate(0);
}
70% {
transform: rotate(28deg);
}
70.8333333333% {
transform: rotate(0);
}
71.6666666667% {
transform: rotate(28deg);
}
72.5% {
transform: rotate(0);
}
}
@keyframes tail {
6.6666666667% {
transform: rotate(0);
}
10% {
transform: rotate(30deg);
}
13.3333333333% {
transform: rotate(0);
}
20% {
transform: rotate(0);
}
26.6666666667% {
transform: rotate(30deg);
}
46.6666666667% {
transform: rotate(30deg);
}
48.3333333333% {
transform: rotate(0);
}
50% {
transform: rotate(28deg);
}
50.8333333333% {
transform: rotate(0);
}
51.6666666667% {
transform: rotate(28deg);
}
52.5% {
transform: rotate(0);
}
53.3333333333% {
transform: rotate(28deg);
}
54.1666666667% {
transform: rotate(0);
}
55% {
transform: rotate(28deg);
}
55.8333333333% {
transform: rotate(0);
}
56.6666666667% {
transform: rotate(28deg);
}
57.5% {
transform: rotate(0);
}
58.3333333333% {
transform: rotate(28deg);
}
59.1666666667% {
transform: rotate(0);
}
60% {
transform: rotate(28deg);
}
60.8333333333% {
transform: rotate(0);
}
61.6666666667% {
transform: rotate(28deg);
}
62.5% {
transform: rotate(0);
}
63.3333333333% {
transform: rotate(28deg);
}
64.1666666667% {
transform: rotate(0);
}
65% {
transform: rotate(28deg);
}
65.8333333333% {
transform: rotate(0);
}
66.6666666667% {
transform: rotate(28deg);
}
67.5% {
transform: rotate(0);
}
68.3333333333% {
transform: rotate(28deg);
}
69.1666666667% {
transform: rotate(0);
}
70% {
transform: rotate(28deg);
}
70.8333333333% {
transform: rotate(0);
}
71.6666666667% {
transform: rotate(28deg);
}
72.5% {
transform: rotate(0);
}
}
@-webkit-keyframes left-ear {
0% {
transform: rotate(6deg);
}
6.6666666667% {
transform: rotate(6deg);
}
13.3333333333% {
transform: rotate(15deg);
}
26.6666666667% {
transform: rotate(15deg);
}
33.3333333333% {
transform: rotate(30deg);
}
40% {
transform: rotate(30deg);
}
46.6666666667% {
transform: rotate(0deg);
}
53.3333333333% {
transform: rotate(0deg);
}
60% {
transform: rotate(15deg).........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0