详细解析：uni-app|vue组件实现茶杯中茶水浮动loading纯CSS动效

本文链接：https://blog.csdn.net/xujing81/article/details/109880150

前言

前面我已经跟大家分享了【科技感Loading动效】和【水珠晃动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文件夹，在此文件夹下创建TeacupLoading.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组件 TeacupLoading.vue

<script>
	import TeacupLoading from '@/components/TeacupLoading.vue'
	export default{
		components:{
			TeacupLoading
		}
	}
</script>

（3）在当前页面中使用自定义vue组件

注意：在使用自定义组件时，需要在最外层再包裹一个view标签，这样做的目的是为了避免在home.vue页面中元素使用了transform样式以后，在自定义vue组件页面样式中元素z-index样式无效的问题。（一定要注意！一定要注意！一定要注意！重要的事情说三遍！）

<template>
	<view class="home">
		<view><TeacupLoading></TeacupLoading></view>
	</view>
</template>

（4）编写自定义vue组件TeacupLoading.vue

注意：样式代码并没有考虑浏览器兼容性问题，本代码的测试环境是谷歌浏览器

在模版代码块中，添加uni-app提供的view组件元素（类似于HTML中的div）并设置class属性为bubble-loading（嗯，你没有看错，就只有这么一个view组件元素，通过CSS样式就能实现文章开头演示的动效！就是这么神奇(*￣︶￣)）

<template>
	<view class="teacup-loading">20%</view>
</template>

设置view元素的样式

.teacup-loading{
        /*相对定位 作为绝对定位元素的父容器*/
		position: relative;

        /*弹性布局，容器内元素水平居中*/
		display: flex;
		justify-content: center;

        /*设置水杯外形、大小及颜色*/
		border: 4px solid rgb(30,29,20);
		border-radius: 0 0 16px 16px;
		border-top-width: 0;
		width: 40px;
		height: 40px;
		background-color: #fff3da;

        /*设置进度百分比文字样式*/
		font-size: 12px;
		font-weight: bold;
		line-height: 24px;
		color: rgb(30,29,20);

        /*隐藏溢出的内部元素*/
		overflow: hidden;

        /*设置元素外部阴影*/
		box-shadow: 0 1px 2px 1px rgba(0,0,0,0.2);

        /*设置3D模式下Z轴偏移量为0*/
		transform: translateZ(0);
	}

利用CSS:before与:after选择器，创建伪元素

分析：利用clip-path:polygon()，创建两个多边形图形的伪元素，分别设置不同的背景色，分别表示远近距离的两块茶水，然后分别设置两块伪元素的动画，通过transform: translateX()设置X轴方向不同的起始点和结束点，再设置一下两个动画的不同播放速度，从而营造出远近两层茶水在运动的视觉效果。（是不是感觉有些难以理解，没关系，来，我们看一下下面的拆解图）

为了演示方便，我先把view元素（茶杯）样式里面的overflow属性注释掉，然后来观察下这时的动画效果，如图：

大家注意到没，茶杯下面的两块水图形实际上是一直在不停的水平移动，上面的图只是我截取的一张图，通过这张图，大家应该就明白我上面分析的原理了

.teacup-loading::before,
	.teacup-loading::after{
		content: '';
        /*绝对定位元素*/
		position: absolute;

        /*设置元素的位置*/
		bottom: 0;
		left: 0;
		z-index: 0;
		right: -120px;
		height: 20px;

        /*自定义多边形*/
		clip-path: polygon(
			0% 20%,
			2% 18%,
			3% 16%,
			5% 14%,
			7% 13%,
			8% 11%,
			10% 10%,
			12% 10%,
			13% 10%,
			15% 10%,
			17% 11%,
			18% 13%,
			20% 14%,
			22% 16%,
			23% 18%,
			25% 20%,
			27% 22%,
			28% 24%,
			30% 26%,
			32% 27%,
			33% 29%,
			35% 30%,
			37% 30%,
			38% 30%,
			40% 30%,
			42% 29%,
			43% 27%,
			45% 26%,
			47% 24%,
			48% 22%,
			50% 20%,
			52% 18%,
			53% 16%,
			55% 14%,
			57% 13%,
			58% 11%,
			60% 10%,
			62% 10%,
			63% 10%,
			65% 10%,
			67% 11%,
			68% 13%,
			70% 14%,
			72% 16%,
			73% 18%,
			75% 20%,
			77% 22%,
			78% 24%,
			80% 26%,
			82% 27%,
			83% 29%,
			85% 30%,
			87% 30%,
			88% 30%,
			90% 30%,
			92% 29%,
			93% 27%,
			95% 26%,
			97% 24%,
			98% 22%,
			100% 20%,
			100% 100%,
			0% 100%
		);
	}

给伪元素添加CSS3动效

说明：伪元素中添加的animation属性与@keyframes一起使用，从而实现不同的动画效果，0%表示开始动画，100%表示结束动画，当然我们还可以在中间设置新的关键帧，例如：在0%和100%中间再设置一个50%。为了实现比较有层次感的动效，我们可以分别设置两个伪元素不同的背景色，同时还需要分别设置两个伪元素的水平移动初始位置和结束位置，最后分别设置一下两个动画的完成时长，保证两个伪元素的动画没有完全重叠。

.teacup-loading::before{
		background-color: rgb(255, 214, 125);
		animation: move1 6s linear infinite;
	}
	.teacup-loading::after{
		background-color: rgb(255, 174, 0);
		animation: move2 2s linear infinite;
	}
	@keyframes move1{
		0%{
			transform: translateX(0);
		}
		100%{
			transform: translateX(-80px);
		}
	}
	@keyframes move2{
		0%{
			transform: translateX(-20px);
		}
		100%{
			transform: translateX(-100px);
		}
	}

总结

怎么样？效果做出来了吗？茶杯中的茶水浮动的效果是不是很逼真呢？╰(*°▽°*)╯ 简单总结下本文用到的知识点：

伪元素中添加的animation属性与@keyframes一起使用，从而实现不同的动画效果，0%表示开始动画，100%表示结束动画，当然我们还可以在中间设置新的关键帧，例如：在0%和100%中间再设置一个50%
编写自定义vue组件中用到了“相对定位于绝对定位”、“弹性布局”、border-radius、box-shadow以及clip-path: polygon(）
添加CSS3动效时用到的animation属性、@keyframes规则以及transform属性，理解为什么两伪元素的动画起始点不相同以及两个动画的播放时间也不同

好啦，以上就是本文中用到的知识点，大家都学会了吗？

如果喜欢小凡的这篇文章，记得点赞、收藏和分享哦！也欢迎大家在评论区留言。