div旋转 vue_详细解析:uniapp项目|vue组件形式实现的水珠晃动loading纯CSS动效
前言
上一篇文件给大家分享了一个颇具科技感的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动效相关推荐
- vue项目调用通用组件_详细解析:uniapp项目|vue组件形式实现的科技感loading纯CSS动效...
前言 本人是一枚并不安分守己的后端程序猿,一直对前端开发"垂涎三尺",所以,一有机会就会"不务正业"一番.最近,发现了一个非常好的学习资料,于是乎,我的老毛病又 ...
- 详细解析:uni-app|vue组件实现茶杯中茶水浮动loading纯CSS动效
前言 前面我已经跟大家分享了[科技感Loading动效]和[水珠晃动Loading动效]两篇文章了,如果大家没有读过,建议大家花一点点时间去看一下,有了前两篇文章的基础后,这次,小凡给大家再分享一个茶 ...
- this指向-作用域、作用域链-预解析 变量提升-Vue组件传值 父子 子父 非父子-Vue数据双向绑定原理
目录 this指向 作用域.作用域链 预解析 变量提升 Vue组件传值 父子 子父 非父子 Vue数据双向绑定原理 1.this指向 函数的this指向 看调用.不看声明 (1)普通函数调用 ①函数名 ...
- cli3暴露api地址 vue_手把手教你开发 Vue 组件库
前言 Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完 从0到1教你搭建前端团队的组件系统 之后很多朋友希望了解一下如何搭建基于vue的组件系统,所以作为这篇文 ...
- 经常用的代码 命令行解析 api 以及vue组件复用方法总结
命令行删除node_mode 简写形式 方法一: npm install rimraf -g rimraf node_modules 这是安装rimraf 方法二: rmdir /s/q your_a ...
- Vue.js解析(十)【Vue组件间通信】
什么是Vue组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊 ...
- uniapp项目 vue create -p dcloudio/uni-preset-vue my-project下载失败
1. 利用github下载:https://github.com/dcloudio/uni-preset-vue 2. 执行命令(原理就是直接使用本地的项目模板,正常情况下是拉去线上模板) // 现在 ...
- 干货分享|纯CSS绘制电池充电水波纹动效(uni-app|view组件版)
前言 依托于CSS3提供的强大功能,我们可以充分发挥自己的想象力,制作出许多非常惊艳的动效,比如:接下来我要跟大家分享的一个完全用CSS绘制出来的电池充电水波纹动效,还是老规矩,小凡我依然分享的是un ...
- 干货分享|巧用CSS滤镜绘制安卓手机充电动效(uni-app|view组件版)
前言 CSS3的滤镜真的是一个非常强大的功能,如果我们能够很好的利用它,并充分发挥我们的想象力,想要制作出非常惊艳的动效也是没有问题的哦.比如:接下来我要跟大家分享的一个巧妙使用CSS滤镜绘制出来的a ...
最新文章
- 回望2018,展望2019
- android socket 简易聊天室 java服务器_利用Socket制作一个简易的Android聊天室
- 剑指offer:链表中倒数第k个结点 python实现
- SQL Server统计信息:问题和解决方式
- 我的Android进阶之旅------gt;Android使用AlarmManager全局定时器实现定时更换壁纸
- 【新年快乐】网易云信春节期间服务公告
- struts2下拉框在不同情况下的各种用法
- 只使用了符号的Ruby程序
- Spring Security 3 Ajax登录–访问受保护的资源
- web系统数据库服务器,Web Gateway
- 谭浩强c语言入门_计算机学生为什么学不会C语言?看到这4点原因,学生表示太真实...
- 读懂 SOLID 的「里氏替换」原则
- 查看你所使用计算机的网卡信息,查看网卡信息命令
- 蓝宝石rx580怎么超频_台式机显卡怎么选?小百科教你准确定位合理选择(3)
- android源码上面开发App
- 计算机操作系统(第二版)庞丽萍 杨富民 第一章	绪论课后答案
- ZZULIOJ:1047: 对数表
- 《关键对话》如何高效能沟通之何谓关键对话
- 11款学习编程好玩的浏览器游戏
- 奇偶数排序--整数数组的奇偶数分开(小米公司笔试题)
热门文章
- Win的phpstudy安装VC报错
- android新浪微博sdk登录获取用户名_多账户的统一登录方案
- tp框架命名空间使用(namespace,use,as,\)
- PHP获取今天, 本周 ,半月 ,本月 ,本季 ,本年,昨天 ,上月时间段
- python读取字典元素笔记_python学习笔记:字典的使用示例详解
- linux 分区_Linux文件系统、逻辑分区、物理分区
- c语言printf右移,C语言printf(“”)左右(转)
- 【若依(ruoyi)】swagger 接口 @ApiModelProperty 添加枚举值说明
- 基于360搜图爬取图片
- python函数的传参要求_python中函数传参详解