【七夕限定】5分钟搞定送媳妇儿的节日气球🎈-阿里云开发者社区

【七夕限定】5分钟搞定送媳妇儿的节日气球🎈

2022-12-07 89

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 前言大家好，我是HoMeTown，下周不出意外的话那么下周就是七夕节了，周六日也就是周末陪媳妇儿看电影外太空的莫扎特，有一说一，这个电影真的不推荐14岁以上的人观看，小孩看还行，给我的感觉就是低配版长江七号。散场之后，碰巧路边有一个卖气球的小姑娘，去买一个，单价30人民币，我直呼我直呼，如果兜里没钱的话，可能兜里就没钱了吧。但是这个怎么可能难得住一个即将秃头的我？

前言

大家好，我是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);
  }
}
复制代码