前言
上一篇文件给大家分享了一个颇具科技感的loading动效，【→传送门】这篇文章，小凡再来跟大家分享一个很酷的仿泡沫水loading动效，依然是纯CSS实现的哦！
一、效果展示及思路分析
1.效果展示
2.思路分析
我们可以将该动效拆成三部分：
|
|
二、实现步骤
1.准备工作
在正式开始写代码之前，需要先下载相应的IDE，以及进行必要的配置工作。
小凡在【uni-app项目|vue组件形式实现的科技感loading纯CSS动效】文章中详细讲解过如何进行必要的配置工作，点击右侧链接查看→科技感Loading动效详解
- 下载Hbuilder X
- 新建uni-app项目
- 在pages文件夹下创建home文件夹，在此文件夹下创建home.vue文件
- 修改配置文件pages.json,设置新创建的home.vue文件为应用启动项
- 项目根目录下新建components文件夹，在此文件夹下创建BubbleLoading.vue自定义组件文件
2.代码实现
（1）在home.vue应用启动页中添加一个布局
<style scoped>
.home{
display: grid;
grid-template-columns: repeat(2,1fr);
grid-template-rows: repeat(3,1fr);
height: 100vh;
justify-items: center;
align-items: center;
max-width: 800px;
margin: 0,auto;
}
.home>view{
transform: scale(1.5);
}
</style>（2） 引入创建好的自定义vue组件，并注册到当前页面中
这里我们提前在uni-app项目中的components文件夹下创建好了自定义vue组件 BubbleLoading.vue
<script>
import BubbleLoading from '@/components/BubbleLoading.vue'
export default{
components:{
BubbleLoading
}
}
</script>（3） 在当前页面中使用自定义vue组件
注意：在使用自定义组件时，需要在最外层再包裹一个view标签，这样做的目的是为了避免在home.vue页面中元素使用了transform样式以后，在自定义vue组件页面样式中元素z-index样式无效的问题。（本例中就存在这个大坑哦，一定要注意！一定要注意！一定要注意！重要的事情说三遍！）
<template>
<view class="home">
<view><BubbleLoading></BubbleLoading></view>
</view>
</template>（4）编写自定义vue组件BubbleLoading.vue
注意：样式代码并没有考虑浏览器兼容性问题，本代码的测试环境是谷歌浏览器
- 在模版代码块中，添加uni-app提供的view组件元素（类似于HTML中的div）并设置class属性为bubble-loading（嗯，你没有看错，就只有这么一个view组件元素，通过CSS样式就能实现文章开头演示的动效！别着急，继续往下看......）
<template>
<view class="bubble-loading">20%</view>
</template>- 设置view元素的样式
.bubble-loading{
/*相对定位 作为绝对定位元素的父容器*/
position: relative;
/*弹性布局，容器内元素水平垂直居中*/
display: flex;
justify-content: center;
align-items: center;
/*设置元素为圆形，背景图片线性渐变并旋转45度*/
border-radius: 100%;
width: 40px;
height: 40px;
background-image: linear-gradient(45deg,rgb(14,14,46),rgb(64,64,113));
/*设置元素中文本样式*/
font-size: 12px;
font-weight: bold;
color: white;
/*设置元素外层阴影样式*/
box-shadow: 0 3px 2px 1px rgba(0,0,0,0.2);
}说明：用到的知识点有“相对定位和绝对定位”、“弹性布局”、border-radius、linear-gradient以及box-shadow，如果对这些知识点不是太了解的话，可以去翻一下资料哦，不难。这里我就不再做过多的解释了。
- 利用CSS:before与:after选择器，创建伪元素
分析：创建的两个伪元素，大小与view元素一样，只是背景色不同而已，通过设置伪元素Y轴显示的位置，从而让伪元素从与view元素的上边缘显示出来一小部分；这时大家可以想象一下，两个露出来的小边缘，通过设置什么样的动画，才可以模拟出仿液态水效果呢？没错，就是旋转！通过设置两个伪元素的不同的旋转速度，就可以模拟出逼真的液态水流动效果
|
|
|
.bubble-loading::before,
.bubble-loading::after{
content: '';
/*绝对定位元素*/
position: absolute;
/*设置元素的位置*/
left: 50%;
top: 50%;
margin-left: -20px;
margin-top: -20px;
/*设置元素的大小、背景色以及形状*/
width: 40px;
height: 40px;
background: rgb(51,149,230);
border-radius: 100%;
/*设置元素的显示层级，将其设置在主元素的后面*/
z-index: -1;
/*设置元素Y轴显示位置*/
transform: translateY(-2px);
}- 给伪元素添加CSS3动效
说明：伪元素中添加的animation属性与@keyframes一起使用，从而实现不同的动画效果，0%表示开始动画，100%表示结束动画，当然我们还可以在中间设置新的关键帧，例如：在0%和100%中间再设置一个50%。为了做出仿液态水效果，我们需要分别给before创建的元素和after创建的元素设置不同的动画播放速度，@keyframes规则中，除了设置旋转角度，还需要设置translateY属性，否则的话，动效会被最前面的view元素遮挡住。
.bubble-loading::before{
animation: rotate2 infinite 3s linear;
}
.bubble-loading::after{
animation: rotate2 infinite 2s linear;
}
@keyframes rotate2{
0%{
transform: rotate(0deg) translateY(-2px);
}
100%{
transform: rotate(360deg) translateY(-2px);
}
}总结
怎么样？效果做出来了吗？是不是很像水滴在晃动呀？简单总结下本文用到的知识点：
- 伪元素中添加的animation属性与@keyframes一起使用，从而实现不同的动画效果，0%表示开始动画，100%表示结束动画，当然我们还可以在中间设置新的关键帧，例如：在0%和100%中间再设置一个50%
- 编写自定义vue组件中用到了“相对定位于绝对定位”、“弹性布局”、border-radius、linear-gradient以及box-shadow
- 添加CSS3动效时用到的animation属性、@keyframes规则以及transform属性，理解为什么要设置translateY的值
好啦，以上就是本文中用到的知识点，大家都学会了吗？
如果喜欢小凡的这篇文章，记得点赞、收藏和分享哦！也欢迎大家在评论区留言。
相关文章推荐：
2405
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
