div+css实现可怜的哈巴狗走路动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现可怜的哈巴狗走路动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@keyframes dog-head {
0% {
transform: rotate(80deg);
-webkit-transform: rotate(80deg);
-moz-transform: rotate(80deg);
-o-transform: rotate(80deg);
-ms-transform: rotate(80deg)
}
20% {
transform: rotate(80deg);
-webkit-transform: rotate(80deg);
-moz-transform: rotate(80deg);
-o-transform: rotate(80deg);
-ms-transform: rotate(80deg)
}
60% {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg)
}
100% {
transform: rotate(80deg);
-webkit-transform: rotate(80deg);
-moz-transform: rotate(80deg);
-o-transform: rotate(80deg);
-ms-transform: rotate(80deg)
}
}
@keyframes paw {
0% {
transform: rotate(-10deg) translate(0,-10px);
-webkit-transform: rotate(-10deg) translate(0,-10px);
-moz-transform: rotate(-10deg) translate(0,-10px);
-o-transform: rotate(-10deg) translate(0,-10px);
-ms-transform: rotate(-10deg) translate(0,-10px)
}
20% {
transform: rotate(20deg) translate(0,0);
-webkit-transform: rotate(20deg) translate(0,0);
-moz-transform: rotate(20deg) translate(0,0);
-o-transform: rotate(20deg) translate(0,0);
-ms-transform: rotate(20deg) translate(0,0)
}
100% {
transform: rotate(-10deg) translate(0,-10px);
-webkit-transform: rotate(-10deg) translate(0,-10px);
-moz-transform: rotate(-10deg) translate(0,-10px);
-o-transform: rotate(-10deg) translate(0,-10px);
-ms-transform: rotate(-10deg) translate(0,-10px)
}
}
@keyframes shadow {
0% {
transform: scale(1) rotate(-5deg);
-webkit-transform: scale(1) rotate(-5deg);
-moz-transform: scale(1) rotate(-5deg);
-o-transform: scale(1) rotate(-5deg);
-ms-transform: scale(1) rotate(-5deg)
}
50% {
transform: scale(1.04) rotate(-5deg);
-webkit-transform: scale(1.04) rotate(-5deg);
-moz-transform: scale(1.04) rotate(-5deg);
-o-transform: scale(1.04) rotate(-5deg);
-ms-transform: scale(1.04) rotate(-5deg)
}
100% {
transform: scale(1) rotate(-5deg);
-webkit-transform: scale(1) rotate(-5deg);
-moz-transform: scale(1) rotate(-5deg);
-o-transform: scale(1) rotate(-5deg);
-ms-transform: scale(1) rotate(-5deg)
}
}
@keyframes run {
0% {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1)
}
20% {
transform: scale(1.02) translate(0,-3px);
-webkit-transform: scale(1.02) translate(0,-3px);
-moz-transform: scale(1.02) translate(0,-3px);
-o-transform: scale(1.02) translate(0,-3px);
-ms-transform: scale(1.02) translate(0,-3px)
}
100% {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1)
}
}
@keyframes eye {
0% {
transform: translate(0,0px);
-webkit-transform: translate(0,0px);
-moz-transform: translate(0,0px);
-o-transform: translate(0,0px);
-ms-transform: translate(0,0px)
}
38% {
transform: translate(0,0px);
-webkit-transform: translate(0,0px);
-moz-transform: translate(0,0px);
-o-transform: translate(0,0px);
-ms-transform: translate(0,0px)
}
40% {
transform: translate(-3px,5px);
-webkit-transform: translate(-3px,5px);
-moz-transform: translate(-3px,5px);
-o-transform: translate(-3px,5px);
-ms-transform: translate(-3px,5px)
}
45% {
transform: translate(6px,9px);
-webkit-transform: translate(6px,9px);
-moz-transform: translate(6px,9px);
-o-transform: tran.........完整代码请登录后点击上方下载按钮下载查看
网友评论0