效果图
页面结构
我们拥有一个
#app盒子作为承载盒子，里面的.balloon_box盒子作为气球和气球阴影的承载体，.balloon是气球盒子，.balloon_shadow是气球阴影盒子
<div id="app"> <div class="balloon_box"> <!-- 气球 --> <div class="balloon"></div> <!-- 气球阴影 --> <div class="balloon_shadow"></div> </div> </div>
初始样式
清除所有盒子的内外边距，在让
#app盒子铺满整个页面，在给他一个背景色，通过flex布局设置元素居中
* { margin: 0; padding: 0; } #app { width: 100vw; height: 100vh; background: #acec96; display: flex; justify-content: center; align-items: center; }
气球承载盒子
我们后期需要使用到定位，所以将承载的盒子设置为相对定位
/* 气球大盒子 */ .balloon_box { position: relative; }
气球实现
气球我们这里也使用相对定位，在给它对应的宽高，使用边框圆角属性结合css的旋转属性实现一个气球的样子，在给上背景色就好了，气球绳子我们这里使用子绝父相，我们利用伪元素的方式进行实现，设置好宽高，通过定位的方式放到合适的位置
/* 气球 */ .balloon { position: relative; width: 200px; height: 200px; background: red; border-radius: 50% 50% 25% 50%; transform: rotate(45deg); } /* 气球绳子 */ .balloon::after{ content:''; width: 70px; height: 1px; background: #000; position: absolute; bottom:-10px; right: 5px; transform: translate(70%) rotate(45deg); }
气球阴影实现
我们设置好宽高，设置好背景色，通过定位的方式定位到气球的正下方位置
/* 气球阴影 */ .balloon_shadow { width: 120px; height: 20px; position: absolute; left: calc(50% - 60px); bottom: -150px; border-radius: 50%; background: rgba(0, 0, 0, 0.2); }
气球漂浮实现
气球漂浮我们采用CSS动画的方式进行实现，通过css属性控制气球的Y轴移动，设置好速度和动画执行秒数后我们开启无限循环和反向播放动画属性，使得气球有一个上下浮动的效果
/* 气球 */ .balloon { position: relative; width: 200px; height: 200px; background: red; border-radius: 50% 50% 25% 50%; animation: float 3s linear infinite alternate; }
/* 气球漂浮动画 */ @keyframes float { 0% { transform: translateY(0) rotate(45deg); } 100% { transform: translateY(-80px) rotate(45deg); } }
气球阴影变化实现
气球阴影这里我们使用到了CSS的
scale属性，结合CSS动画的方式我们对元素进行放大与缩小，和气球漂浮设置的时间需要设置为一致，然后在设置好无限播放和反向播放，这样可以配合气球实现阴影的近小远大的效果
/* 气球阴影 */ .balloon_shadow { width: 120px; height: 20px; position: absolute; left: calc(50% - 60px); bottom: -150px; border-radius: 50%; background: rgba(0, 0, 0, 0.2); animation: shadow 3s linear infinite alternate; }
/* 阴影动画 */ @keyframes shadow { 0% { transform: scale(0.5); } 100% { transform: scale(1); } }
代码我已经放到码上掘金上了，感兴趣的可以看一下！
