微信小程序使用animation.css

animation.css是一款纯css动画库,其中提供了丰富的动画效果

我们直接下载animation.css,即可使用其中的样式

其官网为:Animate.css | A cross-browser library of CSS animations.

1.下载

使用npm下载animation.css:

npm install animation.css -g

注:-g是全局下载,如果需要把package的信息写入package.json文件的话,可以使用-save参数,参考官网:

当然,这样下载安装的前提是你已经配置好了nodejs环境,如果还没有配置好,可以参考:

Vue 2.0 学习笔记——day01(环境配置+入门)_THE WHY的博客-CSDN博客

这篇文章中的nodejs安装配置部分:

或者也可以直接从该网址下载:https://gitee.com/wu-haoyi/tools/blob/master/Wechat/animate.css

2.配置

将下载下来的animate.css放入微信小程序的某一目录下(根据自己情况而定)

并改名为animate.wxss

之后将其中的 :root 修改为 page

保存即可

然后可以在app.wxss中导入该文件:

或者你哪一个页面的样式需要使用animate.css,就在哪一个页面的wxss文件中import也可

在app.wxss中导入即是全局样式,所有页面均可使用

接下来我们就可以使用了

3.使用

目前的版本是v4.1.1,样式前缀为animate__animated

我们想要使用的动画效果的class名可以从官网找到:

选中你想要的样式,复制其class name即可

示例:

使用bounce动画效果,则

class="animate__animated animate__bounce"

4.一个demo

index.html:

<view class="hidden"></view>
<view class="pops animate__animated animate__jello">
<text>这是一个弹窗</text>
</view>

index.wxss:

.hidden{
    position: absolute;
    height: 100vh;
    width: 100%;
    z-index: -1;
    background-color: gray;
}

.pops{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 20%;
    left: 25%;
    z-index: 1;
    width: 400rpx;
    height: 400rpx;
    background-color: white;
}

修改弹窗样式:

即可看到不同的弹窗动画效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/36120.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

构建工具——webpack、vite

文章目录 构建工具Webpack使用步骤配置文件&#xff08;webpack.config.js&#xff09;插件&#xff08;plugin&#xff09; ViteVite 也是前端的构建工具使用命令构建配置文件&#xff1a;vite.config.js 构建工具 当我们习惯了在 node 中编写代码的方式后&#xff0c;在回到…

python怎么获取免费代理IP

什么是免费代理IP 免费代理IP是指可以免费使用的代理服务器的IP地址。代理服务器充当客户端和目标服务器之间的中间人&#xff0c;通过转发请求和响应来实现网络数据的传输。使用代理IP可以隐藏真实的客户端IP地址&#xff0c;实现匿名访问网络资源。 免费代理IP通常由个人或组…

实战:k8s证书续签-2023.6.19(测试成功)

实战&#xff1a;k8s证书续签-2023.6.19(测试成功) 目录 推荐文章 https://www.yuque.com/xyy-onlyone/aevhhf?# 《玩转Typora》 1、前言 k8s集群核心的证书有2套&#xff0c;还有1套非核心的(即使出问题也问题不大)。 ⚠️ 如果是kubeadm搭建的k8s集群&#xff0c;其有效期为…

Spring系列4 -- Bean的作用域和生命周期

目录 1. 案例 2. 作用域定义 2.1 Bean的6种作用域 2.2 设置作用域 3. Sring的执行流程 4. Bean的生命周期 思考: 为什么不是先进行初始化然后再进行设置属性呢? 1. 案例 假设现在有⼀个公共的 Bean&#xff0c;提供给 A ⽤户和 B ⽤户使⽤&#xff0c;然⽽在使⽤的途中…

HTML5中一些酷炫又有趣的新特性代码整理汇总

HTML5中一些酷炫又有趣的新特性代码整理汇总 文章目录 HTML5中一些酷炫又有趣的新特性代码整理汇总前言一、详情标签< details>二、内容可编辑三、标记内容< mark>四、data-* 属性五、输出标签六、数据列表< datalist>七、Meter八、Inputs 前言 HTML5 是 Hy…

Apikit 自学日记:测试数据集

测试数据集 添加数据集的变量 在测试用例详情页面中&#xff0c;您可以点击上方的 测试数据 标签&#xff0c;进入用例的数据管理页面。在这里您可以添加多组测试数据&#xff0c;以及每组测试数据的变量。 在添加数据集前&#xff0c;我们需要设置数据集中存在什么变量。可以…

IPV6使用越来越广,您会配置吗?

前面针对IPv6写过一篇文章&#xff0c;但是好多网友反映没有读懂&#xff0c;今天再给大家把内容浓缩一下&#xff0c;教给大家如何配置。 IPV6的推出主要是为了解决地址空间的不足&#xff0c;从而进一步的促进互联网的发展。IPV6地址空间大到惊人&#xff0c;有人比喻地球上…

Springboot设置并访问静态资源目录

目录​​​​​​​ 静态文件 application设置方法 配置详解 编写配置 优缺点 设置配置类方法 配置详解 编写配置 优缺点 总结 静态文件 静态资源&#xff0c;一般是网页端的&#xff1a;HTML文件、JavaScript文件和图片。尤其是设置图片的静态资源&#xff0c;尤其重…

BERT论文解读及实现(一)

BERT: Pre-training of Deep Bidirectional Transformers for Language Understanding 1 论文解读 1.1 模型概览 There are two steps in our framework: pre-training and fine-tuning. bert由预训练模型微调模型组成。 ① pre-training, the model is trained on unlabele…

基于simulink处理监控视频以选择包含运动的帧(附源码)

一、前言 此示例演示如何处理监控视频以选择包含运动的帧。安全问题要求使用摄像机对重要位置进行持续监控。为了有效地记录、查看和存档这些海量数据&#xff0c;您可以减小视频帧大小或减少录制的视频帧总数。此示例说明了后一种方法。在其中&#xff0c;相机视野中的运动会…

使用GitHub Actions 来进行项目远程服务器部署

由于项目源码是托管在github的&#xff0c;而部署是放在远程服务器上&#xff0c;并且使用nginx部署。 现在的部署流程时&#xff0c;需要更新时&#xff0c;在本地切换到master分支&#xff0c;执行构建操作&#xff0c;拿到构建出的dist目录&#xff0c;将其上传到远程服务的…

【HTTP】HTTP协议 HTTPS 协议

目录 一、HTTP &#x1f337;1、HTTP是什么&#xff1f; &#x1f337;2、HTTP的工作过程 &#x1f337;3、 抓包工具Fiddler的使用 &#x1f337;4、HTTP的协议格式&#xff08;重点&#xff09; &#x1f337;5、HTTP请求 5.1 请求地址URL 5.2 方法method 5.3 认识 …

常见面试题之垃圾收回

1. 简述Java垃圾回收机制&#xff1f;&#xff08;GC是什么&#xff1f;为什么要GC&#xff1f;&#xff09; 为了让程序员更专注于代码的实现&#xff0c;而不用过多的考虑内存释放的问题&#xff0c;所以&#xff0c;在Java语言中&#xff0c;有了自动的垃圾回收机制&#x…

权限管理系统后端实现1-SpringSecurity执行原理概述

spring security的简单原理&#xff1a; SpringSecurity有很多很多的拦截器&#xff0c;在执行流程里面主要有两个核心的拦截器 1&#xff0c;登陆验证拦截器AuthenticationProcessingFilter 2&#xff0c;资源管理拦截器AbstractSecurityInterceptor 但拦截器里面的实现需要…

Android Studio实现内容丰富的安卓公交线路查询平台

如需源码可以添加q-------3290510686&#xff0c;也有演示视频演示具体功能&#xff0c;源码不免费&#xff0c;尊重创作&#xff0c;尊重劳动。 项目编号084 1.开发环境 android stuido jdk1.8 eclipse mysql tomcat 开发语言&#xff1a;java 2.功能介绍 安卓端&#xff1a; …

前端:运用html+css+js实现虎牙直播上的轮播图效果

前端:运用htmlcssjs实现虎牙直播上的轮播图效果 1. 我的实现效果2. 前端界面设置3. 图片动画效果实现4. 总的代码 1. 我的实现效果 近段时间看虎牙直播看的多&#xff0c;发现这上面的一个轮播图效果不错&#xff0c;如是打算运用纯htmlcssjs实现一下上述那个运行效果&#xff…

spring boot项目如何自定义参数校验规则

spring boot项目对参数进行校验时&#xff0c;比如非空校验&#xff0c;可以直接用validation包里面自带的注解。但是对于一些复杂的参数校验&#xff0c;自带的校验规则无法满足要求&#xff0c;此时需要我们自定义参数校验规则。自定义校验规则和自带的规则实现方式一样&…

LangChain大型语言模型(LLM)应用开发(三):Chains

LangChain是一个基于大语言模型&#xff08;如ChatGPT&#xff09;用于构建端到端语言模型应用的 Python 框架。它提供了一套工具、组件和接口&#xff0c;可简化创建由大型语言模型 (LLM) 和聊天模型提供支持的应用程序的过程。LangChain 可以轻松管理与语言模型的交互&#x…

IP 协议(网络层协议)

IP协议 IP 协议作用地址管理动态分配 IP 地址NAT 机制IPv6IP 地址的组成 路由选择 IP 协议作用 主要有两点 : 地址管理 为每个上网的设备分配一个唯一地址. 路由选择 两台主机间的信息交互, 具体走哪条线路. 地址管理 先来看看 IP协议 报文格式 : IP 协议最主要就是 32 位的…

香橙派4和树莓派4B构建K8S集群实践之七: Jenkins

目录 1. 说明 2. 步骤 2.1 准备工作 2.2 安装 2.2.1 用jenkins原站for k8s的安装仓方法安装 2.2.2 Helm 安装 3. 相关命令 4. 遇到的问题 5. 参考 1. 说明 在k8s上部署jenkins&#xff0c;并用 jenkins.k8s-t2.com访问在namespace为devops下安装在指定节点k8s-master-…