麻烦老师帮忙看一下，这是代码还有效果，谢谢
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cartoon Dog</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:.2s;
}
body {background: #0059ff;}
.dog{
width: 300px;
height: 400px;
position: relative;
top: 380px;
}
.center{
position: absolute;
left: 50%;
transform: translate(-50%,0);
}
.forehead{
width: 102px;
height: 48px;
background: var(--bg);
border-radius: 511px /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 /opx opx 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-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 var(--t) ease-out infinite;
}
.birthmark{
width: 30px;
height: 36px;
background: var(--h1);
border-radius: 15px/ 17px 23px 2px 13px;
position: absolute;
z-index: 1;
left: 50%;
top: 10px;
transform: translate(15px,0) rotate(-10deg);
}
.eye{
width: 24;
height: 24px;
background: var(--bg);
border-radius: 12px /13px 12px 12px 2px;
position: absolute;
z-index: 2;
left:50px;
top: 20px;
transform-origin: 50% 0;
transform: translate(-44px,0) rotate(10deg);
box-shadow: 1px 0px 0px 0px #000 inset, -1px 0px 5px 1px #ddd;
overflow: hidden;
}
.eye.ear.right{
transform: scale(-1,1) translate(-21px,0) rotate(10deg);
box-shadow: 1px 0px 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 #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 ;
position: absolute;
left: 50%;
top: 1px;
transform: translate(-50%,0);
border-radius: 30px / 8px 8px 2px 2px ;
background: linear-gradient(30deg,#fff 0% ,#fff 8% ,#b1aeb1 15% ,#b1aeb1 50%, #544d53 100%);
}
.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(-7px,0)rotate(30deg);
}
.mouth{
width: 68px ;
height: 27px ;
background: #671316;
border-radius: 34px / 0px 0px 27px 27px ;
z-index: 1;
box-shadow: 0 0 4px 0 #000 inset;
top: 68px ;
animation: open var(--t) ease-out infinite;
}
.mouth.before{
width: 68px ;
height: 8px ;
background: var0(--bg);
border-radius: 34px /0px 0px 5px 5px ;
content:absolute;
z-index: 1;
}
.teen{
width: 8px ;
height: 3px ;
background: var(--bg);
border-radius: 4px / 0px 0px 0px 1px ;
position: absolute;
left: 50% ;
top: 7%;
transform: translate(-8px,0);
z-index: 1;
}
.teen.right{
transform: scale(-1,1)translate(0px,0);
border-right: 5px solid #ddd;
}
.tongue{
width: 34px ;
width: 14px;
background: #a2504f;
border-radius: 17px / 0px 0px 7px 7px ;
z-index: 0;
box-shadow: 0 0 4px 0 #111 inset;
top: 0px ;
animation: extend var(--t) ease-out infinite;
}
.body{
width: 66px ;
height: 70px ;
background: var(--bg);
top: 89px ;
border-radius: 50%;
}
.arm{
width: 26px ;
height: 40%;
background: var(--bg);
position: absolute;
left: 50px;
top: 5px ;
border-radius: 13px / 20px 0 14px 20px ;
transform: translate(-43px ,0 )rotate(21deg);
}
.arm.before{
content: '';
width: 5px ;
height: 20px ;
border-radius: 5px / 10px 0px 0px 10px ;
box-shadow: -1px 0 0px 0 rgba(200, 200,200, 0.5);
position: absolute;
right: 6px;
top: 14px ;
transform: rotate(-5deg);
}
.arm.right{
transform: scale(-1,1) translate(-17px ,0) rotate(21deg);
}
.leg{
width: 29px ;
height: 50px ;
background: var(--bg);
position: absolute;
left: 50%;
top: 40px ;
border-radius: 15px / 5px 5px 15px 45px ;
transform: translate(-32px ,0);
}
.len.right{
transform: scale(-1,1) translate(-3px,0);
}
.foot{
width: 29px ;
height: 15px ;
background: linear-gradient(-122deg,#ddd 0% ,#ddd 10%,#fff 30%, #fff 100%);
position: absolute;
left: 2px ;
bottom: -8px ;
border-radius: 15px / 10px 10px 5pxx 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(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;}
}
@keyframes extend{
0%{height: 14px;}
50%{height: 23px;}
100%{height: 14px;}
}
@keyframes open{
0%{
height: 27px;
border-radius: 34px /0px 0px 27px 27px ;
}
50%{
height: 20px;
border-radius: 34px /0px 0px 20px 20px ;
}
100%{
height: 27px ;
border-radius: 34px /0px 0px 27px 27px ;
}
}
</style>
</body>
</html>
正在回答 回答被采纳积分+1
同学你好，相信同学自己也能看出来，这个效果与案例中的差太多。所以是不是同学并没有跟着视频练习，而是自己任意发挥的呢？而同学让老师看效果，是具体哪里不会了？还是想要老师把它改成和效果图一样的呢？
如果是前者，建议同学具体描述一下哪一个位置？如果是后者，那么这个效果如果改成与案例中一样，基本上同学的代码老师都得改一遍，等于老师做了一遍，对于你自己来说并没有什么收获。所以建议同学，如果想要和案例达到一样的效果，还是要多看几遍视频，一点一点的跟着案例去做。因为实际开发中，不会用css3去绘制图像的。所以同学简单跟着视频练习即可。
这个其实没有什么技巧，就得一点一点的去调。老师教你一个方法，在浏览器按F12，然后想要调整哪一个元素的样式，可以点击元素，然后在右侧点击要调整的样式，使用鼠标滚轮或者键盘上下键调整数值，直到调整到合适的位置。示例：
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星