作者:Marian Beck 地址:https://dev.to/isarisariver/how-to-draw-a-banana-with-css-15mo
首先,我在页面上添加了一个蓝色的背景,并且添加了一个容器来定位香蕉。
HTML
<div class="page">
<div class="container">
</div>
</div>
CSS:
.page {
width: 960px;
padding: 50px 50px;
margin: 30px auto;
border-radius: 2%;
background-color: #81e4e4; /*light blue*/
display: flex;
justify-content: center;
flex-wrap: nowrap;
}
.container {
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 50px;
position: relative;
}
香蕉的主体由两个带有圆角边框的矩形组成。
矩形中的一个是黄色,形成了香蕉的主体,另一个矩形是与背景相同的颜色,并产生了香蕉的曲率。
两个矩形的宽度均为0。我们在屏幕上看到的只是边框。
(为便于说明,我在屏幕截图中将轮廓颜色更改为黑色)。
HTML
<div class="page">
<div class="container">
<div class="banana">
<div class="banana-body">
<div class="banana-outline"></div>
</div>
</div>
</div>
</div>
CSS
.container {
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 50px;
position: relative;
}
.banana {
height: 500px;
width: 500px;
top: 80px;
position: relative;
}
.banana-body {
height: 80%;
width: 0px;
top: 50px;
left: 160px;
border-right: 180px solid #ecec13; /* yellow */
border-radius: 0 150px 150px 0%;
position: absolute;
transform: rotate(15deg);
}
.banana-outline {
height: 120%;
width: 0px;
top: -20px;
left: -50px;
border-top: 30px solid transparent;
border-right: 120px solid #81e4e4; /* light blue */
border-radius: 0 120px 120px 0%;
position: absolute;
}
眼睛由两个白色的大圆和两个黑色的小圆组成。
HTML
<div class="page">
<div class="container">
<div class="banana">
<div class="banana-body">
<div class="banana-outline"></div>
</div>
<div class="banana-eyes">
<div class="banana-left-eye"></div>
<div class="banana-right-eye"></div>
</div>
</div>
</div>
</div>
CSS
.banana-left-eye {
width: 90px;
height: 90px;
border: 5px solid #e6e619; /* yellow */
background: #FFFFFF;
border-radius: 50%;
position: absolute;
top: 180px;
left: 200px;
}
.banana-left-eye::after {
content:"";
position: absolute;
border-radius: 50%;
background-color: #000000;
width: 35px;
height: 35px;
left: 30px;
top: 30px;
}
.banana-right-eye {
width: 90px;
height: 90px;
border: 5px solid #e6e619; /* yellow */
background: #FFFFFF;
border-radius: 50%;
position: absolute;
top: 180px;
left: 290px;
}
.banana-right-eye::after {
content:"";
position: absolute;
border-radius: 50%;嘴部是另一个圆形边框的矩形。
background-color: #000000;
width: 35px;
height: 35px;
left: 30px;
top: 30px;
}
嘴部是另一个圆形边框的矩形。
HTML
<div class="page">
<div class="container">
<div class="banana">
<div class="banana-body">
<div class="banana-outline"></div>
</div>
<div class="banana-eyes">
<div class="banana-left-eye"></div>
<div class="banana-right-eye"></div>
</div>
<div class="banana-mouth"></div>
</div>
</div>
</div>
CSS
.banana-mouth {
width: 30px;
height: 20px;
border-radius: 0 0 5em 5em;
border-bottom: 5px solid #675340; /* dark outline */
border-right: 5px solid #675340; /* dark outline */
border-left: 5px solid #675340; /* dark outline */
position: absolute;
left: 270px;
top: 270px;
}
香蕉看起来还不是很像香蕉,所以让我们也加上顶端和底端。
HTML
<div class="page">
<div class="container">
<div class="banana">
<div class="banana-body">
<div class="banana-outline"></div>
</div>
<div class="banana-end"></div>
<div class="banana-top"></div>
<div class="banana-eyes">
<div class="banana-left-eye"></div>
<div class="banana-right-eye"></div>
</div>
<div class="banana-mouth"></div>
</div>
</div>
</div>
CSS
.banana-end {
width: 10px;
height: 15px;
border-radius: 0 0 3em 3em;
background: #996633; /* brown */
position: absolute;
transform: rotate(65deg);
bottom: 60px;
left: 160px;
}
.banana-top {
width: 35px;
height: 12px;
background: #4d9933; /* green */
position: absolute;
transform: rotate(25deg);
border-radius: 50% 0 0 50%;
top: 33px;
left: 210px;
}
由于香蕉漂浮在地面上,我们应该加上一个阴影。在漂浮的时候很难保持完全静止,所以让我们把它做成动画。
HTML
<div class="page">
<div class="container">
<div class="banana">
<div class="banana-body">
<div class="banana-outline"></div>
</div>
<div class="banana-end"></div>
<div class="banana-top"></div>
<div class="banana-eyes">
<div class="banana-left-eye"></div>
<div class="banana-right-eye"></div>
</div>
<div class="banana-mouth"></div>
</div>
<div class="banana-float"></div>
</div>
</div>
CSS
.banana {
height: 500px;
width: 500px;
top: 80px;
position: relative;
animation-name: float; /* NEW */
animation-duration: 5s; /* NEW */
animation-iteration-count: infinite; /* NEW */
animation-timing-function: ease; /* NEW */
}
.banana-float {
width: 350px;
height: 10px;
border-radius: 50%;
background-color: #868679;
position: relative;
top: 330px;
left: -150px;
}
@keyframes float {
0%, 100% {
top: 80px;
}
50% {
top: 70px;
}
}
我们给眼睛加上动画,使它看起来更加愚蠢
CSS
/* add the animation to the eyes*/
.banana-right-eye::after {
content:"";
position: absolute;
border-radius: 50%;
background-color: #000000;
width: 35px;
height: 35px;
left: 30px;
top: 30px;
animation: eyes 2s infinite; /* NEW */
}
.banana-left-eye::after {
content:"";
position: absolute;
border-radius: 50%;
background-color: #000000;
width: 35px;
height: 35px;
left: 30px;
top: 30px;
animation: eyes 2s infinite; /* NEW */
}
@keyframes eyes {
0%, 50%, 100% {
left: 30px;
}
25% {
left: 20px;
}
75% {
left: 40px;
}
}
分享,收藏,点赞,在看支持作者