vue项目登录页-实现字体动画案例

vue项目登录页-实现字体动画案例
实现思路：
1，让每个字都包含在span标签中，span标签的display:inner-block
2，页面刚生成时（动画之前）设置margin宽度为80px,opacity为0.2
3，页面渲染完后（mounted方法）设置一个setTimeout，添加一个css样式，css样式中含有动画效果，主要代码如下所示

mounted方法

mounted() {setTimeout(()=>{this.wordFlag = true},200)},

html的代码

<div class="lg-word" :class="[wordFlag?'lg-done':'']"><!--招人才，促就业，为千万企业、学校、学生服务的平台 --><span class="w-base">某</span><span class="w-base">某</span><span class="w-base">平</span><span class="w-base">台</span><span class="w-base">,</span><span class="w-base">招</span><span class="w-base">人</span><span class="w-base">才</span><span class="w-base">,</span><span class="w-base">促</span><span class="w-base">就</span><span class="w-base">业</span><span class="w-base">,</span><span class="w-base">为</span><span class="w-base">千</span><span class="w-base">万</span><span class="w-base">企</span><span class="w-base">业</span><span class="w-base">、</span><span class="w-base">学</span><span class="w-base">校</span><span class="w-base">、</span><span class="w-base">学</span><span class="w-base">生</span><span class="w-base">服</span><span class="w-base">务</span><span class="w-base">的</span><span class="w-base">平</span><span class="w-base">台</span><span class="w-base">。</span></div>

css代码

.lg-word{width: 1100px;margin: 80px auto;display: flex;overflow: hidden;/* border: 1px solid red;*/font-size: 32px;/* color: #ffffff;*/.w-base{display: inline-block;margin:0 40px;opacity: 0.2;/*添加过渡效果*/transition: margin 2s,opacity 2s;}}

.lg-done{/*width: 1440px;*/.w-base{margin:0 2px;opacity: 1;}}

vue项目登录页-实现字体动画案例相关推荐

vue项目登录页背景图百分百铺满屏幕宽高自适应
vue项目背景图百分百铺满屏幕宽高自适应 .login{background: url(../../../static/img/login/beijing@2x.png);background-siz ...
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
VUE 项目落地页使用 LinkedME 深度链接服务跳回App
VUE 项目落地页使用 LinkedME 深度链接服务跳回App 当前需求: 在微信或者浏览器中打开页面, 需要跳转回对应app: 当前实现技术: 使用 LinkedME 深度链接服务实现流程: 1 ...
【登录页星空和捂脸动画特效】vue 实现掘金登录页捂脸动画效果，css 实现登录页星空动画流星效果【通俗易懂】
前言: 这里是展示一下做的登录页的一个好看的样式,同时也写了个下掘金登录页很有意思的捂脸小动画怎么实现的,感觉放在一起还挺好看的. 虽然不知道有没有问题,但是还是声明一下:我就是写来学习学习这种设计, ...
vue3-admin商品管理后台项目(登录页开发和功能实现)
今天来实现vue3-admin商品管理后台项目的登录页功能首先在pages文件夹下面添加一个login.vue文件,里面先写入简单的template <template><div& ...
vue项目登录及token验证 vue-ant
在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: 1.第一次登录的时候,前端调后端的登陆接口,发送用户名和密码 2.后端收到请求,验证用户名和密码,验证成功,就给前端返回一个to ...
后台管理系统项目-登录页-实现步骤
1.登录页面-样式调整登录页整体思路如下: 表单验证(login/index.vue) utils/validate.js ---> validMobile 收集用户的参数,调用actions ...
在vue项目中使用Antv-f2的小案例
目录一.两种引入方式 1.浏览器引入 2.通过 npm 安装二. 两种使用方式 1. 在配置了webpack或使用vue-cli构建的vue项目使用 2. 另一种使用方式是在html中直接使用三 ...
Vue项目登录成功后返回到原操作页面
登录超时或者由于其它原因,造成必须重新登录的情况,相信大家都见过这种场景,比较偷懒的办法是登陆成功厚直接回到主页面,但其实我们有更好的解决办法. 作为vue的标配,我们可以利用axios的全局拦截器做 ...

vue项目登录页-实现字体动画案例

vue项目登录页-实现字体动画案例相关推荐

最新文章

热门文章