气球升空动画！

下载代码

html

css

js

分享到微信朋友圈

X

html

<div class="balloon" style="--x: 94; --h: 57; --s: 19; --d: 3; --delay: 5;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 90; --h: 124; --s: 18; --d: 5; --delay: 7;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 46; --h: 228; --s: 22; --d: 7; --delay: 10;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 59; --h: 196; --s: 50; --d: 2; --delay: 8;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 62; --h: 225; --s: 24; --d: 9; --delay: 9;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 16; --h: 190; --s: 18; --d: 4; --delay: 5;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 67; --h: 105; --s: 48; --d: 1; --delay: 10;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 23; --h: 64; --s: 16; --d: 2; --delay: 4;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 84; --h: 287; --s: 30; --d: 1; --delay: 10;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 87; --h: 191; --s: 34; --d: 5; --delay: 0;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 77; --h: 313; --s: 24; --d: 9; --delay: 7;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 6; --h: 178; --s: 38; --d: 7; --delay: 2;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 20; --h: 184; --s: 30; --d: 7; --delay: 6;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 100; --h: 79; --s: 18; --d: 6; --delay: 2;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 78; --h: 167; --s: 20; --d: 6; --delay: 7;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 2; --h: 321; --s: 25; --d: 2; --delay: 4;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 83; --h: 9; --s: 39; --d: 5; --delay: 1;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 10; --h: 257; --s: 49; --d: 6; --delay: 1;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 96; --h: 346; --s: 38; --d: 7; --delay: 0;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 60; --h: 117; --s: 43; --d: 9; --delay: 7;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 17; --h: 152; --s: 45; --d: 9; --delay: 8;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 57; --h: 286; --s: 31; --d: 10; --delay: 4;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 73; --h: 116; --s: 15; --d: 5; --delay: 8;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 53; --h: 28; --s: 26; --d: 1; --delay: 6;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 83; --h: 198; --s: 45; --d: 9; --delay: 10;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 25; --h: 162; --s: 19; --d: 6; --delay: 3;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 25; --h: 165; --s: 32; --d: 1; --delay: 1;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 99; --h: 153; --s: 17; --d: 3; --delay: 4;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 58; --h: 111; --s: 47; --d: 2; --delay: 6;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 91; --h: 87; --s: 17; --d: 9; --delay: 2;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 59; --h: 332; --s: 26; --d: 9; --delay: 5;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 71; --h: 291; --s: 42; --d: 2; --delay: 10;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 79; --h: 79; --s: 21; --d: 9; --delay: 8;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 29; --h: 278; --s: 24; --d: 2; --delay: 0;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 91; --h: 193; --s: 40; --d: 3; --delay: 5;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 17; --h: 147; --s: 27; --d: 6; --delay: 4;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 90; --h: 112; --s: 39; --d: 4; --delay: 1;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 33; --h: 179; --s: 26; --d: 9; --delay: 6;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 59; --h: 38; --s: 50; --d: 6; --delay: 10;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 49; --h: 92; --s: 44; --d: 3; --delay: 8;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 91; --h: 145; --s: 34; --d: 1; --delay: 4;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 39; --h: 218; --s: 34; --d: 3; --delay: 10;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 99; --h: 245; --s: 36; --d: 8; --delay: 5;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 8; --h: 66; --s: 15; --d: 10; --delay: 10;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 83; --h: 51; --s: 47; --d: 7; --delay: 8;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 93; --h: 29; --s: 30; --d: 10; --delay: 1;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 47; --h: 344; --s: 17; --d: 8; --delay: 1;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 9; --h: 109; --s: 28; --d: 8; --delay: 9;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 43; --h: 300; --s: 30; --d: 6; --delay: 8;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 81; --h: 46; --s: 47; --d: 2; --delay: 9;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 60; --h: 152; --s: 34; --d: 5; --delay: 1;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 27; --h: 65; --s: 50; --d: 5; --delay: 0;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 71; --h: 81; --s: 27; --d: 3; --delay: 1;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 54; --h: 274; --s: 48; --d: 1; --delay: 8;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 25; --h: 70; --s: 15; --d: 6; --delay: 2;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 99; --h: 282; --s: 27; --d: 6; --delay: 4;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 17; --h: 312; --s: 27; --d: 8; --delay: 3;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 30; --h: 157; --s: 27; --d: 1; --delay: 8;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 90; --h: 299; --s: 38; --d: 6; --delay: 0;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 91; --h: 162; --s: 45; --d: 5; --delay: 7;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 50; --h: 213; --s: 19; --d: 5; --delay: 5;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 37; --h: 227; --s: 24; --d: 7; --delay: 6;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 61; --h: 182; --s: 31; --d: 9; --delay: 7;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 97; --h: 161; --s: 37; --d: 1; --delay: 7;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 5; --h: 113; --s: 21; --d: 4; --delay: 4;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 48; --h: 17; --s: 37; --d: 2; --delay: 1;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 79; --h: 31; --s: 47; --d: 9; --delay: 6;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 53; --h: 54; --s: 22; --d: 5; --delay: 5;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 24; --h: 311; --s: 48; --d: 9; --delay: 8;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 89; --h: 48; --s: 17; --d: 4; --delay: 10;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 65; --h: 97; --s: 31; --d: 3; --delay: 8;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 58; --h: 9; --s: 17; --d: 6; --delay: 0;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 9; --h: 14; --s: 36; --d: 4; --delay: 1;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 96; --h: 100; --s: 44; --d: 8; --delay: 5;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 14; --h: 228; --s: 25; --d: 7; --delay: 1;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 90; --h: 216; --s: 32; --d: 7; --delay: 5;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 92; --h: 220; --s: 24; --d: 5; --delay: 3;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 72; --h: 276; --s: 18; --d: 8; --delay: 1;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 43; --h: 26; --s: 48; --d: 4; --delay: 6;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 68; --h: 97; --s: 37; --d: 5; --delay: 0;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 40; --h: 119; --s: 20; --d: 6; --delay: 5;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 20; --h: 338; --s: 37; --d: 6; --delay: 6;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 55; --h: 336; --s: 46; --d: 2; --delay: 5;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 81; --h: 10; --s: 17; --d: 2; --delay: 5;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 69; --h: 314; --s: 20; --d: 10; --delay: 1;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 59; --h: 169; --s: 22; --d: 10; --delay: 10;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 93; --h: 165; --s: 38; --d: 10; --delay: 2;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 7; --h: 271; --s: 43; --d: 1; --delay: 3;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 21; --h: 349; --s: 36; --d: 8; --delay: 7;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 13; --h: 38; --s: 35; --d: 2; --delay: 9;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 55; --h: 164; --s: 27; --d: 9; --delay: 7;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 70; --h: 66; --s: 37; --d: 5; --delay: 0;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 5; --h: 264; --s: 15; --d: 4; --delay: 9;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 24; --h: 265; --s: 40; --d: 7; --delay: 6;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 11; --h: 101; --s: 26; --d: 4; --delay: 5;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 25; --h: 207; --s: 40; --d: 3; --delay: 0;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 72; --h: 296; --s: 20; --d: 7; --delay: 7;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 2; --h: 171; --s: 28; --d: 8; --delay: 9;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 71; --h: 124; --s: 35; --d: 4; --delay: 3;">
  <div class="balloon__handle"></div>
</div>
<div class="balloon" style="--x: 40; --h: 299; --s: 18; --d: 9; --delay: 0;">
  <div class="balloon__handle"></div>
</div>

css

:root {
  --desired-size: 20;
  --coefficient: 1vmin;
  --size: calc(var(--desired-size) * var(--coefficient));
  --primary-color: hsl(320, 100%, 50%);
  --chord: hsl(45, 100%, 40%);
  --shine: hsla(0, 0%, 100%, 0.75);
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(180, 100%, 95%);
  overflow: hidden;
}

.balloon {
  --primary-color: hsla(var(--h, 0), 100%, 50%, 0.8);
  --size: calc(var(--s, 10) * var(--coefficient));
  height: calc(1.2 * var(--size));
  width: var(--size);
  background: var(--primary-color);
  border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%;
  position: absolute;
  top: 50%;
  left: calc(var(--x, 50) * 1%);
  animation: float calc(var(--d, 1) * 1s) calc(var(--delay, 0) * -1s) infinite linear both;
}

.balloon:before {
  content: '';
  position: absolute;
  width: 20%;
  height: 30%;
  background: blue;
  top: 8%;
  left: 16%;
  border-radius: 50%;
  transform: rotate(40deg);
  background: var(--shine);
}

.balloon__handle {
  width: 2%;
  height: 60%;
  background: var(--chord);
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  position: absolute;
}
.balloon__handle:before,
.balloon__handle:after {
  content: '';
  position: absolute;
  height: 5%;
  transform: translate(-50%, 0);
  border-radius: 25% / 50%;
  left: 50%;
}

.balloon__handle:before {
  top: 0;
  background: var(--chord);
  width: 500%;
}

.balloon__handle:after {
  top: 5%;
  background: var(--primary-color);
  width: 700%;
}

@keyframes float {
  from {
    transform: translate(-50%, -50%) translate(0, 100vh);
  }
  to {
    transform: translate(-50%, -50%) translate(0, -100vh);
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg

<!doctype html> <html> <head> <meta charset="utf-8"> <title>气球升空动画！-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号