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.6666666.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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