【发布时间】:2023-02-15 19:33:50
【问题描述】:
我有这个驯鹿代码,但它非常偏离中心。我是按照教程做的,但在教程中效果很好,但在我身上却不行。
这是驯鹿的所有 CCS 代码。
.reindeer {
position: relative;
}
.face {
background-color: #A98467;
height: 150px;
width: 100px;
border-radius: 70px;
position: relative;
top: 200px;
left: 320px;
}
.antler1, .antler2 {
height: 25px;
width: 96px;
border-right: 10px solid #6C584C;
border-top: 10px solid #6C584C;
border-radius: 0 20px 0 0;
z-index: -2;
position: relative;
bottom: 15px;
right: 65px;
}
.a1, .a2, .a3 {
background-color: #6C584C;
height: 55px;
width: 10px;
border-radius: 10px;
position: relative;
}
.a1 {
bottom: 55px;
}
.a2 {
bottom: 110px;
left: 30px;
}
.a3 {
bottom: 165px;
left: 60px;
}
.antler2 {
left: 65px;
bottom: 40px;
transform: rotateY(180deg);
}
.eye1, .eye2{
background-color: #333333;
height: 20px;
width: 20px;
border-radius: 50%;
position: relative;
}
.eye1 {
bottom: 5px;
left: 15px
}
.eye2 {
bottom: 25px;
left: 60px;
}
.eyeball {
background-color: white;
height: 8px;
width: 8px;
border-radius: 50%;
position: relative;
top: 5px;
left: 5px;
}
.ear1, .ear2 {
background-color: #95755E;
height: 30px;
width: 60px;
border-radius: 0 0 30px 30px;
position: relative;
z-index: -1;
}
.ear1 {
bottom: 75px;
right: 23px;
transform: rotate(-25deg);
}
.ear2 {
bottom: 105px;
left: 60px;
transform: rotate(25deg);
}
.nose {
background-color: #EE0000;
height: 22px;
width: 35px;
border-radius: 50%;
position: relative;
bottom: 60px;
left: 30px;
}
.nose2 {
background-color: #F8453B;
height: 9px;
width: 15px;
border-radius: 50%;
position: relative;
bottom: 78px;
left: 43px;
}
.leg1, .leg2 {
background-color: #6C584C;
height: 100px;
width: 20px;
position: relative;
border-radius: 0 0 8px 8px;
z-index: -2;
}
.leg1 {
left: 340px;
top: 300px;
}
.leg2 {
left: 380px;
top: 200px;
}
.body {
background-color: #95755E;
height: 200px;
width: 130px;
border-radius: 100px;
position: relative;
bottom: 60px;
left: 305px;
z-index: -1;
}
我不确定它是如何让我的驯鹿远离中心的,我试过相对于绝对改变,但它不起作用。有人想帮助我吗?这是一个学校项目,我需要非常快地完成它。
【问题讨论】: