老师我跟着视频做的为什放大肚子分层，有个层次，麻烦老师您了
来源：2-12 汉克狗最终动画效果
前后1
2020-03-06 15:23:32
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="dog center">
<div class="forehead center"></div>
<div class="face center"></div>
<div class="chin center"></div>
<div class="ear"></div>
<div class="ear right"></div>
<div class="birthmark"></div>
<div class="eye"><div class="pupil"></div></div>
<div class="eye right"><div class="pupil"></div></div>
<div class="nose center">
<div class="nostril"></div>
<div class="nostril right"></div>
</div>
<div class="mouth center">
<div class="teen"></div>
<div class="teen right"></div>
<div class="tongue center"></div>
</div>
<div class="body center">
<div class="arm"></div>
<div class="arm right"></div>
<div class="leg"><div class="foot"></div></div>
<div class="leg right"><div class="foot"></div></div>
<div class="belly center"></div>
</div>
</div>
<style>
: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%,0)
}
.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;
left: 50%;
z-index: 0;
top:34px;
transform-origin:50% 0;
transform:translate(-42px,0) rotate(10deg);
animation: rotate var(--t) ease-out infinite;
}
.ear.right{
transform:scale(-1,1) translate(-26px,0) rotate(10deg);
animation: rotate-r var(--t) ease-out infinite;
}
.birthmark{
width:30px;
height:36px;
background:var(--h1);
border-radius:15px/17px 23px 2px 13px;
position:absolute;
left: 50%;
z-index: 1;
top:10px;
transform-origin:50% 0;
transform:translate(15px,0) rotate(-10deg);
}
.eye{
width:24px;
height:24px;
background:var(--bg);
border-radius:12px/13px 12px 12px 2px;
position:absolute;
left: 50%;
z-index: 2;
top:20px;
transform-origin:50% 0;
transform:translate(-44px,0) rotate(10deg);
box-shadow:1px 0px 0px #000 inset,-1px 0px 5px 1px #ddd;
overflow:hidden;
}
.eye.right{
transform:scale(-1,1) translate(-21px,0) rotate(10deg);
box-shadow:1px 0px 0px #000 inset;
}
.pupil{
width:26px;
height:26px;
background:#e79101;
border-radius:50%;
position:absolute;
left: 3px;
top:1px;
box-shadow:0 0 8px 0 #000 inset;
animation: translate var(--t) ease-out infinite;
}
.pupil:before{
width:18px;
height:18px;
background:#000;
border-radius:50%;
position:absolute;
left: 50%;
top:50%;
transform:translate(-50%,-50%);
content: "";
}
.pupil:after{
width:5px;
height:5px;
background:#fff;
border-radius:50%;
position:absolute;
left: 3px;
top:7px;
content: "";
}
.nose{
width:62px;
height:32px;
top:42px;
background:#363035;
z-index:3;
border-radius:31px/10px 10px 22px 22px;
}
.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;
top:19px;
background: linear-gradient(0deg,#363035 0%,#000 100%);
position:absolute;
left: 50%;
border-radius:50%;
transform:translate(-21px,0) rotate(30deg);
animation: resize var(--t) ease-out infinite;
}
.nostril.right{
transform: scale(-1,1) translate(-1px,0) rotate(30deg);
}
.mouth{
width:68px;
height:27px;
top:68px;
background:#671316;
z-index:1;
border-radius:34px/0px 0px 27px 27px;
box-shadow:0 0 4px 0 #000 inset;
animation:open var(--t) ease-out infinite;
}
.mouth:before{
content: "";
width:68px;
height:8px;
top:0px;
background:var(--bg);
border-radius:34px/0px 0px 5px 5px;
position: absolute;
z-index:1;
left: 0;
}
.teen{
width:8px;
height:3px;
top:7px;
background:var(--bg);
border-radius:4px/0px 0px 0px 1px;
position:absolute;
left: 50%;
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;
top:0px;
background:#a2504f;
border-radius:17px/0px 0px 7px 7px;
left: 50%;
box-shadow:0 0 4px 0 #111 inset;
animation:tit var(--t) ease-out infinite;
}
.body{
width:66px;
height:70px;
top:89px;
background:var(--bg);
border-radius:50%;
}
.arm{
width:26px;
height:40px;
position:absolute;
left:50%;
top:5px;
background:var(--bg);
border-radius:13px/20px 0 14px 20px;
transform:translate(-43px,0) rotate(21deg);
}
.arm:before{
content: "";
width:5px;
height:20px;
position:absolute;
right:6px;
top:14px;
border-radius:5px/10px 0 0 10px;
transform:rotate(-5deg);
box-shadow: -1px 0 0 0 rgba(200,200,200,0.5);
}
.arm.right{
transform:scale(-1,1) translate(-17px,0) 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,0);
}
.leg.right{
transform:scale(-1,1) translate(-3px,0);
}
.foot{
width:29px;
height:15px;
background:linear-gradient(-120deg,#ddd 0%, #fff 30%,#fff 100%);
position:absolute;
left:2px;
bottom:-8px;
border-radius:15px/10px 10px 5px 5px;
}
.belly{
z-index:2;
width: 60px;
height:36px;
background:linear-gradient(0deg,#ddd 0%, #fff 20%,#fff 100%);
border-radius:30px/0 0 36px 36px;
top:34px;
}
@keyframes rotate{
0%{transform:translate(-42px,0) rotate(10deg);}
50%{transform:translate(-42px,0) rotate(20deg);}
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(20deg);}
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;}
}
@keyframes tit{
0%{height:14px;}
50%{height:30px;}
100%{height:14px;}
}
@keyframes open{
0%{height:27px;}
50%{height:20px;}
100%{height:27px;}
}
</style>
</body>
</html>
2回答
-
好帮手慕星星
2020-03-06
同学你好，视频中实现的颜色确实有些问题：
有分层的情况。
可以看一下源码中效果，将肚子以及腿的渐变色修改一下：
.leg { width: 29px; height: 50px; /* background: linear-gradient(-85deg, #ddd 0%, #ddd 5%, #fff 20%, #fff 100%); */ background: linear-gradient(-90deg, var(--gray) 0%, var(--bg) 20%, var(--bg) 100%); position: absolute; left: 50%; top: 40px; border-radius: 15px/5px 5px 15px 45px; transform: translate(-32px, 0); }.belly { z-index: 2; width: 60px; height: 36px; /* background: linear-gradient(0deg, #ddd 0%, #fff 20%, #fff 100%); */ background: linear-gradient(0deg, var(--gray) 0%, var(--bg) 20%, var(--bg) 100%); border-radius: 30px/0 0 36px 36px; top: 34px; }
自己再测试下，祝学习愉快！
0 -
前后1
提问者
2020-03-06
老师您能看下到我下个问题，是连接的
0
相似问题