前言
大家好，我是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
效果如下：
网络异常，图片无法展示
|
