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

冷不防 2023-01-02 11:28 233阅读 0赞

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

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;
                }
            }

[20210105190018734.gif_pic_center]: /images/20221119/fc97bb94f6f946cea0d4c03f2d8078c4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，233人围观）

还没有评论，来说两句吧...

相关阅读

相关【vue实战项目】通用管理系统：登录页

![3d7e3ef380744e5ba2c68f7e4a29b4d2.jpeg][] ![3db32d9c2cc74f84bfb91473a0d35357.gif][] 目

- 日理万妓/ 2024年02月19日 09:43/ 0 赞/ 128 阅读

相关 Vue+Nuxt项目如何实现首页优化？

目录前言一、性能分析工具介绍 1. PageSpeed Insights工具 1.1 PageSpeed简介 1.2 PageSpeed安装 2. web

水深无声/ 2023年06月12日 08:47/ 0 赞/ 95 阅读

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

vue项目登录页-实现字体动画案例实现思路： 1，让每个字都包含在span标签中，span标签的display:inner-block 2，页面刚生成时（动画之前

冷不防/ 2023年01月02日 11:28/ 0 赞/ 234 阅读

相关 vue项目开发引导页-带有动画效果

vue项目开发引导页-带有动画效果，如下图所示本案例实现步骤是: 1，先开发一个全局的弹框（遮罩层）[全局弹框代码-遮罩层][-] 2，添加背景图-使用绝对定位实

冷不防/ 2023年01月02日 11:21/ 0 赞/ 330 阅读

相关 vue项目添加animation动画-抖动效果案例

vue项目添加animation动画效果，如下图所示 ![在这里插入图片描述][20201230185519980.gif_pic_center] 主要代码如下：

ゝ一纸荒年。/ 2023年01月01日 02:52/ 0 赞/ 547 阅读

相关 [Vue]Vue项目引入自定义字体

字体准备：去谷歌字体网下载想要的字体文件：（http://www.googlefonts.cn/）其实也可以不下载直接引入，但是最好是下载下来后期部署到自己的静态

柔光的暖阳◎/ 2022年12月03日 02:22/ 0 赞/ 509 阅读

相关 VUE项目引用外部字体

> 背景： > > web页面的UI设计时，常常会用到一些陌生又非常好看的字体，但是在开发过程中总是设置对应的字体名称却不生效，这就需要引用外部字体实现

川长思鸟来/ 2022年11月30日 04:17/ 0 赞/ 242 阅读

相关 vue实现登录

<el-form-item> <input placeholder="User" v-model="form.name"> </el-for

水深无声/ 2022年01月20日 11:51/ 0 赞/ 321 阅读

相关 Vue教程(动画案例-列表动画)

前面给大家介绍了动画的基本使用，本文我们来实现一个动画的简单案例，效果如下 ![在这里插入图片描述][20190723173022390.gif] Vue动画案例

绝地灬酷狼/ 2021年11月27日 04:02/ 0 赞/ 450 阅读

相关 vue项目中实现登录拦截

一、路由拦截 1. 如果开发的是后台管理项目，希望必须登录才能访问其他页面的话，就用下面的这种方式进行拦截 import Vue from 'vue'

ゝ一纸荒年。/ 2021年09月19日 03:48/ 0 赞/ 499 阅读