前言

本人是一枚并不安分守己的后端程序猿，一直對(duì)前端開發(fā)“垂涎三尺”，所以，一有機(jī)會(huì)就會(huì)“不務(wù)正業(yè)”一番。最近，發(fā)現(xiàn)了一個(gè)非常好的學(xué)習(xí)資料，于是乎，我的老毛病又犯了，經(jīng)過一段時(shí)間的研究，終于，把這些技能“收入囊中”。但是，本人覺得，這么好的前端學(xué)習(xí)資料，如果被我“中飽私囊”了，實(shí)在是太可惜了。所以呢，我就花了一點(diǎn)時(shí)間，為大家解析一下這些炫酷的技能。這篇文章，解析的是一個(gè)loading加載的動(dòng)效，純CSS的哦。

---

一、效果展示及思路分析

1.效果展示

2.思路分析

我們可以將該動(dòng)效拆成兩部分來理解：

第一部分 圓形圖標(biāo)以及圖標(biāo)中的進(jìn)度文字百分比、第二部分 圍繞圓形圖標(biāo)轉(zhuǎn)動(dòng)的圓弧

廢話不多說，直接上代碼！！

二、實(shí)現(xiàn)步驟

1.準(zhǔn)備工作

在正式開始寫代碼之前，需要先下載相應(yīng)的IDE，以及進(jìn)行必要的配置工作。

• 下載Hbuilder X

• 新建uni-app項(xiàng)目

• 在pages文件夾下創(chuàng)建home文件夾，在此文件夾下創(chuàng)建home.vue文件

• 修改配置文件pages.json,設(shè)置新創(chuàng)建的home.vue文件為應(yīng)用啟動(dòng)項(xiàng)

• 項(xiàng)目根目錄下新建components文件夾，在此文件夾下創(chuàng)建CircleLoading.vue自定義組件文件

uni-app項(xiàng)目目錄結(jié)構(gòu)pages.json配置文件中新增home為應(yīng)用啟動(dòng)頁

ok，搞定以上準(zhǔn)備工作后，我們就可以開始敲代碼了。

2.代碼實(shí)現(xiàn)

(1)首先，為了演示方便，我們需要在home.vue應(yīng)用啟動(dòng)頁中添加一個(gè)布局，如圖

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

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

注意：在使用自定義組件時(shí)，需要在最外層再包裹一個(gè)view標(biāo)簽，這樣做的目的是為了避免在home.vue頁面中元素使用了transform樣式以后，在自定義vue組件頁面樣式中元素z-index樣式無效的問題。(這個(gè)坑，我已經(jīng)爬過了！o(╥﹏╥)o 大家就不要再往里跳了！放心！這次分享的動(dòng)效中沒有這個(gè)坑，大家安心的繼續(xù)敲代碼吧！)

home.vue完整代碼

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

說明：樣式代碼并沒有考慮瀏覽器兼容問題，本代碼的測試環(huán)境是谷歌瀏覽器。

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

• 設(shè)置view元素的樣式

說明：用到的知識(shí)點(diǎn)有“相對(duì)定位和絕對(duì)定位”、“彈性布局”、border-radius以及box-shadow，如果對(duì)這些知識(shí)點(diǎn)不是太了解的話，可以去翻一下資料，不難。這里我就不再做過多的解釋了。(我第一次看到這些樣式代碼時(shí)，表示也是一臉懵B，沒有辦法，“不務(wù)正業(yè)”嘛，還是要付出一定代價(jià)的。還好，我還有一點(diǎn)點(diǎn)前端基礎(chǔ)，學(xué)起來也比較快，終于讓我把這段代碼搞定！)

• 利用CSS:before選擇器，創(chuàng)建偽元素

分析：創(chuàng)建的這個(gè)偽元素實(shí)際上和view元素是一樣大小的，只不過它們重疊了而已。這個(gè)時(shí)候，我們只設(shè)置了偽元素的上邊框的顏色，所以就做出了我們想要的樣式。如圖：

• 給偽元素添加CSS3動(dòng)效

說明：偽元素中添加的animation屬性與@keyframes一起使用，從而實(shí)現(xiàn)不同的動(dòng)畫效果，0%表示開始動(dòng)畫，100%表示結(jié)束動(dòng)畫，當(dāng)然我們還可以在中間設(shè)置新的關(guān)鍵幀，例如：在0%和100%中間再設(shè)置一個(gè)50%

---

總結(jié)

哎呀，打了這么半天的字，終于把這個(gè)動(dòng)效的實(shí)現(xiàn)過程給大家講完了，怎么樣？做出來的效果還不錯(cuò)吧！那么，就讓我們簡單來總結(jié)下這篇文件的知識(shí)點(diǎn)。

• uni-app項(xiàng)目中如何設(shè)置應(yīng)用啟動(dòng)頁，如何創(chuàng)建自定義vue組件以及如何在應(yīng)用啟動(dòng)頁中使用自定義vue組件

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

• 添加CSS3動(dòng)效時(shí)用到的animation屬性以及@keyframes規(guī)則

以上就是本文中用到的知識(shí)點(diǎn)，說一個(gè)題外話哈，小凡覺得，這個(gè)動(dòng)效除了以上的知識(shí)點(diǎn)以外，最重要的還是如何拆分這個(gè)動(dòng)效，從而來實(shí)現(xiàn)它，這個(gè)才是最關(guān)鍵的，剩下的就是把拆分的功能做出來就OK了。(嘿嘿，其實(shí)后端的很多功能也是這么個(gè)思路！突然感覺，我怎么這么優(yōu)秀呢！咳咳......不小心說出了心聲，大家就當(dāng)沒看見我前面的字好了！(*^▽^*))

總結(jié)

以上是生活随笔為你收集整理的vue项目调用通用组件_详细解析：uniapp项目|vue组件形式实现的科技感loading纯CSS动效...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。