当前位置: 首页 > news >正文

用 WOW.js 和 animate.css 实现动画效果

用 wow.js 就可以实现动画效果,但由于里面的动画样式太少,一般还会引入 animated.css

第一步:下载

选择合适的包管理器下载对应的内容

pnpm i wow.js animated.css --save

第二步:引入

在main.js中加入:

import 'animate.css/animate.min.css'
import 'wow.js/css/libs/animate.css'

在需要使用动画的 vue 文件中引入:

import WOW from 'wow.js'

第三步:使用

使用动画样式都需要加上‘wow’类名,可以在animate.css官网找到想要的动画样式:animate.css 官网

滑动到对应位置的时候就可以看到‘你好’从左侧淡入。

<div class="wow fadeInRight">你好
</div>

相关文章:

用 WOW.js 和 animate.css 实现动画效果

用 wow.js 就可以实现动画效果&#xff0c;但由于里面的动画样式太少&#xff0c;一般还会引入 animated.css 第一步&#xff1a;下载 选择合适的包管理器下载对应的内容 pnpm i wow.js animated.css --save 第二步&#xff1a;引入 在main.js中加入&#xff1a; import …...

1-知识图谱-概述和介绍

知识图谱&#xff1a;浙江大学教授 陈华军 知识图谱 1课时 http://openkg.cn/datasets-type/ 知识图谱的价值 知识图谱是有什么用&#xff1f; 语义搜索 问答系统 QA问答对知识图谱&#xff1a;结构化图 辅助推荐系统 大数据分析系统 自然语言理解 辅助视觉理解 例…...

flink jobgraph详细介绍

一、Flink JobGraph 的核心概念 JobGraph 是 Flink 作业的核心执行计划&#xff0c;它描述了作业的任务拓扑结构和数据流关系。JobGraph 由以下几部分组成&#xff1a; 顶点&#xff08;Vertex&#xff09; 每个顶点代表一个任务&#xff08;Task&#xff09;&#xff0c;例如…...

使用nginx+rtmp+ffmpeg实现桌面直播

使用nginxrtmpffmpeg实现桌面直播 流媒体服务器搭建 docker run docker镜像基于添加了rtmp模块的nginx&#xff0c;和ffmpeg docker pull alfg/nginx-rtmp docker run -d -p 1935:1935 -p 8080:80 --namenginx-rtmp alfg/nginx-rtmprtmp模块说明 进入容器内部查看 docker…...

每日一题——将数字字符串转化为IP地址

将数字字符串转化为IP地址 题目描述解题思路回溯法步骤分解 代码实现全局变量有效性验证函数回溯函数主函数完整代码 复杂度分析关键点说明总结 这题难度还挺大的&#xff0c;整体上实现并不容易。建议参考视频 和https://programmercarl.com/0093.%E5%A4%8D%E5%8E%9FIP%E5%9C%…...

机器学习数学基础:25.随机变量分布详解

一、随机变量与分布函数的基本概念 &#xff08;一&#xff09;什么是随机变量&#xff1f; 在概率论领域&#xff0c;随机变量是将随机试验的结果进行数值化的关键概念。它就像一座桥梁&#xff0c;把抽象的随机事件和具体的数学分析连接起来。 举例来说&#xff0c;在一个…...

香港电讯与Zenlayer达成战略合作,拓展全球互联生态圈

作为主要国际金融与贸易中心&#xff0c;香港一直是连系中国内地及全球市场的重要门户。香港电讯作为本地领先的综合电讯服务提供商&#xff0c;拥有广泛的网络资源和深厚的技术专长&#xff0c;一直支持国内企业“走出去”和外资企业“走进来”。而旗下由PCCW Global营运的Con…...

MySQL-事务隔离级别

事务有四大特性&#xff08;ACID&#xff09;&#xff1a;原子性&#xff0c;一致性&#xff0c;隔离性和持久性。隔离性一般在事务并发的时候需要保证事务的隔离性&#xff0c;事务并发会出现很多问题&#xff0c;包括脏写&#xff0c;脏读&#xff0c;不可重复读&#xff0c;…...

【Python学习 / 6】面向对象编程(OOP)

文章目录 ⭐前言⭐一、类和对象&#xff1a;面向对象编程基础1. 类&#xff08;Class&#xff09;类的组成&#xff1a;例子&#xff1a;定义一个简单的 Dog 类代码解析&#xff1a; 2. 对象&#xff08;Object&#xff09;对象的创建&#xff1a; 3. 三大特性&#xff1a;封装…...

Ollama DeepSeek + AnythingLLM 实现本地私有AI知识库

Ollama DeepSeek AnythingLLM 实现本地私有AI知识库 本地部署DeepSeek-r1下载安装AnythingLLMAnythingLLM 配置LLM首选项Embedder首选项向量数据库工作区其他配置 AnythingLLM Workspace使用上传知识词嵌入知识检索 本文主要介绍了如何使用AnythingLLM结合Ollama部署的DeepSee…...

个人博客测试报告

一、项目背景 个人博客系统采用前后端分离的方法来实现&#xff0c;同时使用了数据库来存储相关的数据&#xff0c;同时将其部署到云服务器上。前端主要有四个页面构成&#xff1a;登录页、列表页、详情页以及编辑页&#xff0c;以上模拟实现了最简单的个人博客系统。其结合后…...

嵌入式八股文(四)计算机网络篇

第一章 基础概念 1. 服务 指网络中各层为紧邻的上层提供的功能调用,是垂直的。包括面向连接服务、无连接服务、可靠服务、不可靠服务。 2. 协议 是计算机⽹络相互通信的对等层实体之间交换信息时必须遵守的规则或约定的集合。⽹络协议的三个基本要素:语法、…...

基于Electron+Vue3创建桌面应用

Electron 是一个开源框架,基于 Chromium 和 Node.js,用于开发跨平台桌面应用程序。它允许开发者使用 HTML、CSS 和 JavaScript 等 Web 技术构建原生桌面应用,支持 Windows、macOS 和 Linux。Electron 以其开发便捷性、强大的功能和丰富的生态系统而广泛应用于工具类应用、媒…...

建立稳定分析模式的模式语言01

Haitham Hamza 等 著&#xff0c;wnb 译 摘要 一般认为&#xff0c;软件分析模式在减少开销和缩短软件产品生命周期等方面会起到重要的作用。然而&#xff0c;分析模式的巨大潜能还未被充分发掘。缺乏稳定性是当前分析模式存在的主要问题。多数情况下&#xff0c;为特定问题建…...

【C++游戏开发-五子棋】

使用C开发五子棋游戏的详细实现方案&#xff0c;涵盖核心逻辑、界面设计和AI对战功能&#xff1a; 1. 项目结构 FiveChess/ ├── include/ │ ├── Board.h // 棋盘类 │ ├── Player.h // 玩家类 │ ├── AI.h // AI类 │ └── Game.h // 游戏主逻辑 ├── src/ …...

ubuntu20动态修改ip,springboot中yaml的内容的读取,修改,写入

文章目录 前言引入包yaml原始内容操作目标具体代码执行查看结果总结: 前言 之前有个需求&#xff0c;动态修改ubuntu20的ip&#xff0c;看了下&#xff1a; 本质上是修改01-netcfg.yaml文件&#xff0c;然后执行netplan apply就可以了。 所以&#xff0c;需求就变成了 如何对ya…...

tailwindcss学习02

vue中接入tailwindcss 使用cmd不要使用powershell npm create vitelatest stu02 -- --template vue cd stu02npm install --registry http://registry.npm.taobao.org npm install -D tailwindcss3.4.17 postcss autoprefixer --registry http://registry.npm.taobao.org npx t…...

千峰React:脚手架准备+JSX基础

组件化->封装性 React提供函数组件实现组件化 React和传统JS的区别就是JS需要手动管理DOM操作&#xff0c;React: 采用组件化开发&#xff0c;通过虚拟DOM提升性能。 MVC 是一种软件设计模式&#xff0c;全称为 Model-View-Controller&#xff08;模型-视图-控制器&#x…...

【算法】快排

题目 快排 思路 如果输入为0或1直接返回&#xff1b;否则取一个基准值&#xff0c;可以取中间位置&#xff0c;如果输入是有序的可以避免时间过长&#xff0c;然后移动指针&#xff0c;先让i指针右移&#xff0c;如果小于基准值就继续右移&#xff0c;j指针左移同理。如果指…...

开放签电子签章工具版 2.0 正式发布,构建全场景电子签约能力、满足复杂的签章管理场景

根据近半年开源用户和市场需求反馈&#xff0c;开放签团队推出电子签章工具版2.0版本&#xff0c;主要解决复杂的签约流程集成和电子印章授权管理场景。以API接口对外提供服务和配置一套可视化后台管理系统&#xff0c;可与业务系统无缝集成&#xff0c;用户使用起来毫无“违和…...

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

【C++特殊工具与技术】优化内存分配(一):C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...

论文阅读:LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址&#xff1a;LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂&#xff0c;正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...

Axure零基础跟我学:展开与收回

亲爱的小伙伴,如有帮助请订阅专栏!跟着老师每课一练,系统学习Axure交互设计课程! Axure产品经理精品视频课https://edu.csdn.net/course/detail/40420 课程主题:Axure菜单展开与收回 课程视频:...

在Spring Boot中集成RabbitMQ的完整指南

前言 在现代微服务架构中&#xff0c;消息队列&#xff08;Message Queue&#xff09;是实现异步通信、解耦系统组件的重要工具。RabbitMQ 是一个流行的消息中间件&#xff0c;支持多种消息协议&#xff0c;具有高可靠性和可扩展性。 本博客将详细介绍如何在 Spring Boot 项目…...