"1024"看过来会跳舞的香蕉
作者: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;
}
}
分享,收藏,点赞,在看支持作者
本文参与?腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-10-24，如有侵权请联系?cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
容器服务
腾讯云容器服务（Tencent Kubernetes Engine, TKE）基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务，覆盖 Serverless、边缘计算、分布式云等多种业务部署场景，业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者，主导开源项目Crane，全面助力客户实现资源优化、成本控制。