前言

上一篇文件給大家分享了一個頗具科技感的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應用啟動頁中添加一個布局

(2)?引入創建好的自定義vue組件，并注冊到當前頁面中

這里我們提前在uni-app項目中的components文件夾下創建好了自定義vue組件 BubbleLoading.vue

(3) 在當前頁面中使用自定義vue組件

注意：在使用自定義組件時，需要在最外層再包裹一個view標簽，這樣做的目的是為了避免在home.vue頁面中元素使用了transform樣式以后，在自定義vue組件頁面樣式中元素z-index樣式無效的問題。(本例中就存在這個大坑哦，一定要注意！一定要注意！一定要注意！重要的事情說三遍！)

(4)編寫自定義vue組件BubbleLoading.vue

注意：樣式代碼并沒有考慮瀏覽器兼容性問題，本代碼的測試環境是谷歌瀏覽器

• 在模版代碼塊中，添加uni-app提供的view組件元素(類似于HTML中的div)并設置class屬性為bubble-loading(嗯，你沒有看錯，就只有這么一個view組件元素，通過CSS樣式就能實現文章開頭演示的動效！別著急，繼續往下看......)

• 設置view元素的樣式

?說明：用到的知識點有“相對定位和絕對定位”、“彈性布局”、border-radius、linear-gradient以及box-shadow，如果對這些知識點不是太了解的話，可以去翻一下資料哦，不難。這里我就不再做過多的解釋了。

• 利用CSS:before與:after選擇器，創建偽元素

分析：創建的兩個偽元素，大小與view元素一樣，只是背景色不同而已，通過設置偽元素Y軸顯示的位置，從而讓偽元素從與view元素的上邊緣顯示出來一小部分；這時大家可以想象一下，兩個露出來的小邊緣，通過設置什么樣的動畫，才可以模擬出水珠晃動的效果呢？沒錯，就是旋轉！通過設置兩個偽元素的不同的旋轉速度，就可以模擬出逼真的水珠晃動效果

• 給偽元素添加CSS3動效

說明：偽元素中添加的animation屬性與@keyframes一起使用，從而實現不同的動畫效果，0%表示開始動畫，100%表示結束動畫，當然我們還可以在中間設置新的關鍵幀，例如：在0%和100%中間再設置一個50%。為了做出水珠晃動的效果，我們需要分別給before創建的元素和after創建的元素設置不同的動畫播放速度，@keyframes規則中，除了設置旋轉角度，還需要設置translateY屬性，否則的話，動效會被最前面的view元素遮擋住。

---

總結

怎么樣？效果做出來了嗎？是不是很像水滴在晃動呀？簡單總結下本文用到的知識點：

• 偽元素中添加的animation屬性與@keyframes一起使用，從而實現不同的動畫效果，0%表示開始動畫，100%表示結束動畫，當然我們還可以在中間設置新的關鍵幀，例如：在0%和100%中間再設置一個50%

• 編寫自定義vue組件中用到了“相對定位與絕對定位”、“彈性布局”、border-radius、linear-gradient以及box-shadow

• 添加CSS3動效時用到的animation屬性、@keyframes規則以及transform屬性，理解為什么要設置translateY的值

好啦，以上就是本文中用到的知識點，大家都學會了嗎？

總結

以上是生活随笔為你收集整理的div旋转 vue_详细解析：uniapp项目|vue组件形式实现的水珠晃动loading纯CSS动效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。