前言
本人是一枚并不安分守己的后端程序猿，一直对前端开发“垂涎三尺”，所以，一有机会就会“不务正业”一番。最近，发现了一个非常好的学习资料，于是乎，我的老毛病又犯了，经过一段时间的研究，终于，把这些技能“收入囊中”。但是，本人觉得，这么好的前端学习资料，如果被我“中饱私囊”了，实在是太可惜了。所以呢，我就花了一点时间，为大家解析一下这些炫酷的技能。这篇文章，解析的是一个loading加载的动效，纯CSS的哦。
一、效果展示及思路分析
1.效果展示
2.思路分析
我们可以将该动效拆成两部分来理解：
第一部分 圆形图标以及图标中的进度文字百分比、第二部分 围绕圆形图标转动的圆弧
废话不多说，直接上代码！！
二、实现步骤
1.准备工作
在正式开始写代码之前，需要先下载相应的IDE，以及进行必要的配置工作。
- 下载Hbuilder X
- 新建uni-app项目
- 在pages文件夹下创建home文件夹，在此文件夹下创建home.vue文件
- 修改配置文件pages.json,设置新创建的home.vue文件为应用启动项
- 项目根目录下新建components文件夹，在此文件夹下创建CircleLoading.vue自定义组件文件
ok，搞定以上准备工作后，我们就可以开始敲代码了。
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组件，并注册到当前页面中
<script>
import CricleLoading from '@/components/CircleLoading.vue'
export default {
components:{
CricleLoading
}
}
</script>（3） 在当前页面中使用自定义vue组件
注意：在使用自定义组件时，需要在最外层再包裹一个view标签，这样做的目的是为了避免在home.vue页面中元素使用了transform样式以后，在自定义vue组件页面样式中元素z-index样式无效的问题。（这个坑，我已经爬过了！o(╥﹏╥)o 大家就不要再往里跳了！放心！这次分享的动效中没有这个坑，大家安心的继续敲代码吧！）
<template>
<view class="home">
<view><CircleLoading></CircleLoading></view>
</view>
</template>home.vue完整代码
<template>
<view class="home">
<view><CircleLoading></CircleLoading></view>
</view>
</template>
<script>
import CricleLoading from '@/components/CircleLoading.vue'
export default {
components:{
CricleLoading
}
}
</script>
<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>（4）编写自定义vue组件CircleLoading.vue
说明：样式代码并没有考虑浏览器兼容问题，本代码的测试环境是谷歌浏览器。
- 在模版代码块中，添加uni-app提供的view组件元素（类似于HTML中的div）并设置class属性为circle-loading（嗯，你没有看错，就只有这么一个view组件元素，通过CSS样式就能实现文章开头演示的动效！别着急，继续往下看......）
<template>
<view class="circle-loading">20%</view>
</template>- 设置view元素的样式
.circle-loading{
/*设置相对定位，作为绝对定位元素的父容器*/
position: relative;
/*弹性布局，容器内元素水平垂直居中*/
display: flex;
justify-content: center;
align-items: center;
/*将元素边框样式设置成轨道演示*/
border: 4px solid rgb(184,187,191);
border-radius: 100%;
width: 40px;
height: 40px;
/*设置进度文本样式*/
font-size: 12px;
font-weight: bold;
color: rgb(172,28,177);
/*设置元素的外层和内层阴影样式*/
box-shadow: 0 1px 2px 1px rgba(0,0,0,0.2),
inset 0 1px 2px 1px rgba(0,0,0,0.2);
}说明：用到的知识点有“相对定位和绝对定位”、“弹性布局”、border-radius以及box-shadow，如果对这些知识点不是太了解的话，可以去翻一下资料，不难。这里我就不再做过多的解释了。（我第一次看到这些样式代码时，表示也是一脸懵B，没有办法，“不务正业”嘛，还是要付出一定代价地。还好，我还有一点点前端基础，学起来也比较快，终于让我把这段代码搞定！）
- 利用CSS:before选择器，创建伪元素
分析：创建的这个伪元素实际上和view元素是一样大小的，只不过它们重叠了而已。这个时候，我们只设置了伪元素的上边框的颜色，所以就做出了我们想要的样式。如图：
view元素
伪元素
重叠效果
.circle-loading::before{
content: '';
/*绝对定位元素*/
position: absolute;
/*设置元素的位置*/
left: 50%;
top: 50%;
margin-left: -24px;
margin-top: -24px;
/*设置元素的样式*/
display: block;
/*这里把元素的边框设置为透明色*/
border: 4px solid transparent;
border-radius: 100%;
/*只有顶部的边框有颜色*/
border-top-color: rgb(172,28,191);
width: 40px;
height: 40px;
/*为元素添加动效*/
animation: circle 2s ease infinite;
}- 给伪元素添加CSS3动效
说明：伪元素中添加的animation属性与@keyframes一起使用，从而实现不同的动画效果，0%表示开始动画，100%表示结束动画，当然我们还可以在中间设置新的关键帧，例如：在0%和100%中间再设置一个50%
@keyframes rotatel{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}总结
哎呀，打了这么半天的字，终于把这个动效的实现过程给大家讲完了，怎么样？做出来的效果还不错吧！那么，就让我们简单来总结下这篇文件的知识点。
- uni-app项目中如何设置应用启动页，如何创建自定义vue组件以及如何在应用启动页中使用自定义vue组件
- 编写自定义vue组件中用到了“相对定位于绝对定位”、“弹性布局”、border-radius以及box-shadow
- 添加CSS3动效时用到的animation属性以及@keyframes规则
以上就是本文中用到的知识点，说一个题外话哈，小凡觉得，这个动效除了以上的知识点以外，最重要的还是如何拆分这个动效，从而来实现它，这个才是最关键的，剩下的就是把拆分的功能做出来就OK了。（嘿嘿，其实后端的很多功能也是这么个思路！突然感觉，我怎么这么优秀呢！咳咳......不小心说出了心声，大家就当没看见我前面的字好了！(*^▽^*)）
如果喜欢小凡的这篇文章，记得点赞、收藏和分享哦！也欢迎大家在评论区留言。
相关文章推荐
490
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
