12行js核心代码实现满屏升空气球

本文主要是介绍12行js核心代码实现满屏升空气球，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

最近在琢磨着css一些属性，发现一个有趣的小动画：满屏升空气球，如图文章封面所示，如动画文章结尾所示。虽然这个小动画，一搜集就能找到了，但是发现，代码有点长，所以自己改动了一下下，并在此过程掌握了一些css相关属性知识。下面我们先一起来简单回顾一下css的相关知识！

❓ calc函数与var函数

calc函数：可用于动态计算css任何长度值，注意地，计算长度的运算值的运算符前后都需要一个空格，否则会报错。width:calc(100% - 10px); * var函数：使用自定义属性（变量声明）。自定义属性是带–前缀的，比如--width:200px; // css变量声明width:var(--width); // 变量使用 ❓ hsl函数与hsla函数
hsl函数：是一种将RGB颜色模型转化为在坐标系中表示的函数，它有三个参数：色相（Hue）、饱和度（Saturation）、亮度（Lightness）。
animation：它有7个属性：animation-name（动画名称，@keyframes定义的动画），animation-duration（动画周期，如2s），animation-timing-function（动画方式，如linear匀速动画），animation-delay（动画延迟，开始时间），animation-iteration-count（动画播放次数），animation-direction（是否循环交替反向播放），animation-fill-mode（控制动画模式），animation-play-state（指定动画是否正在运行或已暂停）。* transform：中文意思是变形、转化，transform支持的操作有rotate（旋转）、skew（扭曲）、scale（缩放）、translate（移动）、matrix（矩形变形）。如果transform有多个值直接从左到右按顺序执行。好的以上就是这个满屏深空气球涉及到的一些css基础概念知识，接下来我们一步步🏃‍🏃‍🏃‍去玩一玩这个满屏深空气球！

设置默认样式和背景：flex布局，最高度满屏，设置动画背景。

<style> <style> * {margin: 0;padding: 0;}body {margin: 0 auto;min-height: 100vh;position: relative;display: flex;justify-content: center;align-items: center;background: url('./balloon-bg.jpg');background-size: 100% 100%;overflow: hidden;} </style>

设置气球：包括气球、气球捆绑、气球棒，通过两个盒子实现，借助伪元素:before、:after在元素前后添加相关样式实现。

从图上我们可以找出四个点：`红气球`、`红气球上的白椭圆`、`捆绑气球`、`气球棒`、`气球口`。我们真正渲染就两个盒子：```
<–传入了五个样式动态变量–>

```

定义气球的样式，并在气球上添加白色椭圆形，主要地，border-radius属性带了/符号，左边代表水平半径，右边代表垂直半径，我们平常使用border-radius都是只有一个值，其实是省略了，因为它们的值都是一样。而这里使用了border-radius完整结构。它有四个值：border-top-left-radius（边框左上角）、 border-top-right-radius（边框右上角）、 border-bottom-right-radius（边框右下角）、 border-bottom-left-radius（边框左下角）。简述为水平上四个半径，垂直上四个半径，如图所示：

.balloon {--width: calc(var(--size, 10) * 1vmin);height: calc(1.2 * var(--width));width: var(--width);background: hsla(var(--hue), 100%, 50%, 0.8);border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%;position: absolute;top: 30%;left: var(--left, 50%);animation: float calc(var(--rate, 1) * 1s) calc(var(--delay, 0) * -1s) infinite linear both;
}/* 气球盒子前面添加白色椭圆 */
.balloon:before {content: '';position: absolute;width: 20%;height: 30%;top: 8%;left: 16%;border-radius: 50%;transform: rotate(40deg);background: hsla(0, 0%, 100%, 0.75);/* 白椭圆背景 */
}

设置气球棒：主要通过伪元素before和after实现，在气球棒前面添加气球口和捆绑位置。由于一个元素只能用一个before，所以需要after结合使用，通过top定位使其位于元素前。

.handle {width: 2%;height: 60%;background: hsl(45, 100%, 40%);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元素前添加一捆版*/
.handle:before {top: 0;background: hsl(45, 100%, 40%);width: 500%;
}/* 在handle元素后添加一个气球口，由于定位在top所以显示在元素前 */
.handle:after {top: 5%;background: hsla(var(--hue), 100%, 50%, 0.8);width: 700%;
}

设置气球动画：实现气球从下到上匀速移动就可以升空了。

/* 动画是从下到上匀速移动 */
@keyframes float {from {transform: translate(-50%, -50%) translate(0, 100vh);}to {transform: translate(-50%, -50%) translate(0, -100vh);}
}

上面就是一个简单气球🎈的实现，怎么实现满屏气球？简单理解就是多个气球的合并，难道要写多个盒子吗？确实是这样子，但可以有更好的办法，其实就是通过原生操作多个盒子生成，这就是12行js核心代码：

// 加载的是标签里传入动态变量的style属性
function loadStyle (style) {const el = document.createElement('div'); // 创建气球盒子const childEl = document.createElement('div');// 创建气球棒盒子childEl.className = 'handle';// 赋值样式el.className = 'balloon';// 赋值气球样式el.style = style;// 赋值style属性el.append(childEl);// 气球盒子添加子盒子document.body.appendChild(el);// body元素中添加气球盒子
}// styleList数组就是style字符串集合
for (let item in styleList) {loadStyle(styleList[item]);
}

效果图如下所示：