携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情
前言
大家好，我是HoMeTown，下周不出意外的话那么下周就是七夕节了，周六日也就是周末陪媳妇儿看电影外太空的莫扎特，有一说一，这个电影真的不推荐14岁以上的人观看，小孩看还行，给我的感觉就是低配版长江七号。散场之后，碰巧路边有一个卖气球的小姑娘，去买一个，单价30人民币，我直呼我直呼，如果兜里没钱的话，可能兜里就没钱了吧。但是这个怎么可能难得住一个即将秃头的我？
开始
回到家，我只办三件事：写气球！ 写气球！ 还是**的写气球！
气球构成
气球本身、气球节、气球棍棍
气球轨迹
Y轴 + Rotate旋转
球体
首先是球体，利用border-radius属性构造气球本身的椭圆形
<div class="balloon" style="--size: 90px; --ani: balloon1; --sec: 4s">
<span>七</span>
<div class="handle"></div>
</div>
.balloon {
width: calc(1.2 * var(--size));
height: calc(1.4 * var(--size));
background-color: rgba(215, 0, 15, 0.8);
border-radius: 80% 80% 80% 80%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
animation: var(--ani) var(--sec) ease-in-out infinite;
}
构造气球表面的光线折射
.balloon::before {
content: "";
position: absolute;
width: 20%;
height: 30%;
top: 8%;
left: 16%;
border-radius: 50%;
transform: rotate(40deg);
background: rgba(241, 242, 229, 0.75);
}
气球棍棍
构造气球下面的棍棍
.handle {
width: 2px;
height: 100px;
background: rgba(255, 255, 255, 0.5);
top: 100%;
left: 50%;
transform: translate(-50%, 0);
position: absolute;
}
气球棍棍上方的气球节
.handle:before,
.handle:after {
content: "";
position: absolute;
height: 5%;
transform: translate(-50%, 0);
border-radius: 25% / 50%;
left: 50%;
}
.handle:before {
top: 0;
background: rgba(215, 0, 15, 0.8);
width: 10px;
}
.handle:after {
top: 5%;
background: rgba(215, 0, 15, 0.8);
width: 12px;
}
轨迹动画
悬浮在上空的气球主要的运动轨迹为 上下与左右旋转
@keyframes balloon1 {
0%,
100% {
transform: translateY(0) rotate(-6deg);
}
50% {
transform: translateY(-20px) rotate(8deg);
}
}
到这里，一个气球就搞定了，接下来需要做的就是CV
效果如下：
