登录界面
1、背景图轮播
写了BgAnimation的模块,封装了背景图轮播的功能,并在App.vue中导入并使用。
主要技术点:
css3动画属性animation的使用
【注】用到了带前缀的关键帧定义,好奇查了一下前缀的作用,原来是用来兼容各个浏览器的。
前缀名 | 兼容浏览器 | 说明 |
---|---|---|
-webkit- | Chrome、Safari、Opera | 前缀-webkit-用来兼容Chrome4.0至43.0以下版本、Safari4.0至9.0以下版本、Opera15.0至30.0以下的版本的@keyframes属性,也就是说从Chrome43.0、Safari9.0、Opera30.0版本开始,就不需要写这个前缀了 |
-o- | Opera | 兼容Opera12.0至某个版本的@keyframes属性 |
-moz- | 用来兼容Firefox | 用来兼容Firefox5.0至16.0以下的@keyframes属性,16.0版本开始,就不需要写这个前缀了 |
无前缀 | IE | 用来兼容IE的@keyframes属性,从IE10.0开始就支持@keyframes属性了 |
CSS 关键帧动画:
1.用 @keyframes 定义关键帧
定义名字和每个关键帧的状态。
值 | 描述 |
---|---|
value | 规定不透明度。从 0.0(完全透明)到1.0(完全不透明)。 |
inherit | 应该从父元素继承 opacity 属性的值。 |
2.用 animation 应用关键帧,到具体元素,创建动画效果
animation: 关键帧名字 动画完成时间 匀速变化 无限循环 动画在启动前的延迟间隔
背景搞好之后,添加页面元素,即登录表单—美化样式—再给背景加上vue-particals的动画。
2、vue-particals的应用(粒子动效)
实际上是别人写好的一个插件。
Vue-particals使用方法
但跟着文档写之后发生了报错,原因是文档里使用插件的方法是Vue2的格式,Vue3引用插件应该这样:
引入好后在Login.vue中插入组件,并传入参数。
3、路由的应用
点击 登录按钮,利用路由跳转到Home页面。
路由的作用:实现SPA应用,方便页面跳转和组件更新
路由工作流程:通过路径更改与之前设置的key value对比,跳转组件。
什么是路由:
一个路由就是一组key-value映射关系,key为路径,value可能是function(后端路由发请求)或component。
路由使用方法
最后在项目中的效果:在“登录”页点击按钮将登录组件切换为首页。