为什么我的动画加上去不动？

首页课程实战体系课手记专栏慕课教程

为什么我的动画加上去不动？

来源：2-12 汉克狗最终动画效果

王嘉炜

2019-07-30 09:31:18

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

:root {--h1:#1b2f90;

--bg:#f9f9f6;

--t:1s;}

body {background:#ffc400;}

.dog {width:300px;

height:400px;

position:relative;}

.center{position:absolute;

left:50%;

transform:translate(-50%);}

.forehead {width:102px;

height:48px;

background: var(--bg);border-radius:51px / 40px 40px 8px 8px;

z-index:1;}

.face {width:110px;

height:68px;

background:var(--bg);

border-radius:50%;

top:20px;

z-index:1;}

.chin {width:104px;

height:36px;

background:var(--bg);

border-radius:52px / 0px 0px 36px 36px;

top:60px;

z-index:1;}

.ear {width:16px;

height:70px;

background:var(--h1);

border-radius:50%;

position:absolute;

z-index:0;

left:50%;

top:34px;

transform:translate(-42px,0) rotate(10deg);

transform-origin:50% 0;

animation-name: rotate var(--t) ease-out infinite;}

.ear.right {

transform: scale(-1,1) translate(-26px,0) rotate(10deg);

animation-name: rotate-r var(--t) ease-out infinite;}

.eye {width:24px;

height:24px;

background:var(--bg);

border-radius:12px / 13px 12px 12px 2px;

position:absolute;

z-index:2;

left:50%;

top:20px;

transform-origin:50% 0;

transform:translate(-44px,0) rotate(10deg);

box-shadow:1px 0 0 0 #000 inset,-1px 0px 5px 1px #ddd;

overflow:hidden;}

.eye.right {transform:scale(-1,1) translate(-19px,0) rotate(10deg);

box-shadow:1px 0 0 0 #000 inset;}

.birthmark {width:30px;

height:36px;

background:var(--h1);

z-index:1;

border-radius:15px / 17px 23px 2px 13px;

position:absolute;

left:50%;

top:10px;

transform:translate(15px,0px) rotate(-10deg);}

.pupil {width:26px;

height:26px;

background:#e79101;

border-radius:50%;

position:absolute;

left:3px;

top:1px;

box-shadow:0px 0 8px 0 #000 inset;

animation-name: translate var(--t) ease-out infinite;}

.pupil::before {content:"";

width:18px;

height:18px;

background:#000;

border-radius:50%;

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);}

.pupil:after {content:"";

width:6px;

height:6px;

background:#fff;

border-radius:50%;

position:absolute;

top:7px;

left:3px;}

.nose {width:62px;

height:32px;

top:42px;

border-radius:31px / 10px 10px 30px 30px;;

background:#363035;

z-index:2;}

.nose:before {content:"";

width:60px;

height:10px;

background:linear-gradient(30deg,#fff 0%, #fff 8%, #b1aeb1 15%,#b1aeb1 50% ,#544d53 100%);

border-radius:30px / 8px 8px 2px 2px;

position:absolute;

left:50%;

top:1px;

transform:translate(-50%,0);

}

.nostril {width:15px;

height:4px;

border-radius:50%;

position:absolute;

left:50%;

top:19px;

background:linear-gradient(0deg,#363035 0%, #000 100%);

transform:translate(-21px,0) rotate(30deg);

z-index:5;

animation-name: resize var(--t) ease-out infinite;}

.nostril.right {

transform:scale(-1,1) translate(-7px,0) rotate(30deg);}

.mouth {width:68px;height:27px;

background:#671316;

border-radius:34px / 0 0 27px 27px;

z-index:1;

top:68px;

box-shadow:0 0 4px 0 #000 inset;}

.mouth:before {content:"";

width:68px;

height:8px;

background:var(--bg);

border-radius: 34px / 0 0 5px 5px;

position:absolute;

/* display:black;识别伪类 */

z-index:1;}

.teen {width:8px;

height:3px;

background:var(--bg);

border-radius: 4px / 0 0 0px 1px;

position:absolute;

left:50%;

top:7px;

transform:translate(-8px,0);

z-index:1;}

.teen.right {transform:scale(-1,1) translate(0,0);

border-right:.5px solid #ddd;}

.tongue {width:34px;

height:14px;

background:#a2504f;

border-radius:17px / 0 0 7px 7px;

box-shadow:0 0 4px 0 #111 inset;

top:0px;

z-index:0;}

.body {width:66px;

height:70px;

border-radius:50%;

background:var(--bg);

top:89px;}

.arm {width:26px;

height:40px;

position:absolute;

left:50%;

top:5px;

border-radius:13px / 20px 0 14px 20px;

background:var(--bg);

transform:translate(-43px,0px) rotate(21deg);}

.arm:before {content:"";

width:5px;

height:20px;

border-radius:5px / 10px 0 0 10px;

box-shadow:-1px 0 0 0 rgba(200, 200, 200, 0.5);

position:absolute;

top:14px;

right:7px;

transform:rotate(-5deg);

}

.arm.right {transform:scale(-1,1) translate(-15px,0px) rotate(21deg);}

.leg {width:29px;

height:50px;

background:linear-gradient(-85deg,#ddd 0%,#ddd 5%,#fff 20%,#fff 100%);

position:absolute;

left:50%;

top:40px;

border-radius:15px / 5px 5px 15px 45px;

transform:translate(-32px,0px);}

.leg.right {transform:scale(-1,1) translate(-3px,0);}

.foot {width:29px;

height:15px;

background:linear-gradient(-120deg,#ddd 0%,#ddd 8%,#fff 20%,#fff 100%);

position:absolute;

left:2px;

bottom: -8px;

border-radius: 15px / 10px 10px 5px 5px;}

.belly {width:60px;

height:36px;

background:linear-gradient(0deg,#ddd 0%,#fff 20%,#fff 100%);

border-radius:30px / 0 0 36px 36px;

top:34px;

z-index: 2;}

@keyframes rotate {

0% {transform:translate(-42px,0) rotate(10deg);}

50% {transform:translate(-42px,0) rotate(30deg);}

100% {transform:translate(-42px,0) rotate(10deg);}

}

@keyframes rotate-r {

0% {transform:scale(-1,1) translate(-26px,0) rotate(10deg);}

50% {transform:scale(-1,1) translate(-26px,0) rotate(30deg);}

100% {transform:scale(-1,1) translate(-26px,0) rotate(10deg);}

}

@keyframes translate {

0% {left:3px;}

50% {left:6px;}

100% {left:3px;}

}

@keyframes resize {

0% {height:4px;}

50%{height:3px;}

100%{height:4px;}

}

</style>

</body>

</html>

写回答

1回答

好帮手慕夭夭

2019-07-30

已采纳

你好同学，animation-name只是设置动画名称的，但是代码中在animation-name设置了多个参数，那么就应使用简写形式，即animation。否则属性设置无效哦。参考如下：

鼻子的动画，稍微调整一下，因为1px的变化不明显

祝学习愉快，望采纳。

0 学习 · 40143 问题

查看课程

相似问题

动画效果不符合要求

回答 2

关于元素的位置的定位问题

回答 1

为什么嘴巴是上面在动？

回答 2

老师我看你帮我批改的作业，为什么做了一个就行了，moveclouds,就行了，？？

回答 1

为什么我试了第一朵云动画是瞬间移动的而不是慢慢移动过去？

回答 2

打开慕课网App查看更多内容