微信小程序使用animation.css

这篇具有很好参考价值的文章主要介绍了微信小程序使用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参数,参考官网:

微信小程序使用animation.css,全栈,微信小程序,微信小程序,css,小程序

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

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

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

微信小程序使用animation.css,全栈,微信小程序,微信小程序,css,小程序

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

2.配置

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

微信小程序使用animation.css,全栈,微信小程序,微信小程序,css,小程序

并改名为animate.wxss

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

微信小程序使用animation.css,全栈,微信小程序,微信小程序,css,小程序

保存即可

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

微信小程序使用animation.css,全栈,微信小程序,微信小程序,css,小程序

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

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

接下来我们就可以使用了

3.使用

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

微信小程序使用animation.css,全栈,微信小程序,微信小程序,css,小程序

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

微信小程序使用animation.css,全栈,微信小程序,微信小程序,css,小程序

选中你想要的样式,复制其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;
}

修改弹窗样式:

微信小程序使用animation.css,全栈,微信小程序,微信小程序,css,小程序

即可看到不同的弹窗动画效果文章来源地址https://www.toymoban.com/news/detail-528357.html

到了这里,关于微信小程序使用animation.css的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 如何在微信小程序中使用less来编写css

    在微信小程序中使用 Less 需要一些额外的配置步骤,因为小程序本身不支持直接引用 Less 文件。我们可以借助 Webpack 进行构建,使用一些 loader 来编译 Less 文件。以下是具体步骤: 初始化项目 使用微信开发者工具新建一个小程序项目,或在已有项目的基础上操作。 安装依赖 使用

    2024年04月09日
    浏览(61)
  • 微信小程序之CSS

    目录 1、CSS简介 1.1、内联样式 1.2、内部样式表 1.3、外部引用 2、CSS属性 3、CSS选择器 4、CSS函数 学习路径:菜鸟教程,自己做了一个适合自己的记录 CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式,可以通过以下方式添加到HTML中: 内联样式- 在HTML元素中使用\\\"style\\\"  属性 内

    2024年02月09日
    浏览(52)
  • 微信小程序——CSS3渐变

      SS3 渐变(gradients)可以在两个或多个指定的颜色之间显示平稳的过渡。CSS3 定义了两种类型的渐变(gradients): 1、线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向; 2、径向渐变(Radial Gradients)- 由它们的中心定义。 线性渐变 (1)从上到下渐变(默认情况)

    2024年02月03日
    浏览(47)
  • 微信小程序css实现瀑布流布局

    废话不多说 直接上代码 博客地址:BULINGBULING

    2024年02月13日
    浏览(42)
  • 微信小程序 纯css画仪表盘

    刚看到设计稿的时候第一时间想到的就是用 canvas 来做这个仪表盘,虽然本人的画布用的不是很好但还可以写一写😀。话不多说直接上代码。最后有纯 css 方法 到此仪表盘就画完了,最后需求有变动需要再仪表盘上加文本,众所周知 canvas 在小程序中的层级很高。但是官方说

    2024年02月04日
    浏览(43)
  • 微信小程序js如何动态设置css

    微信小程序中可以使用setData()方法动态设置CSS样式。 例如,我们可以在wxml文件中定义一个样式类: ``` view class=\\\"my-class\\\"Hello World/view ``` 然后在js文件中使用setData()方法动态设置该样式类的CSS样式: ``` Page({   data: {     myClassStyle: \\\'\\\'   },   onLoad: function () {     this.setData({    

    2024年02月09日
    浏览(40)
  • 微信小程序引入外部的CSS或iconfont

    使用外部样式的方法是: @import \\\'相对路径下的外部样式文件.wxss\\\'; iconfont作为一种特殊的CSS也逃不开这个命运,小程序的wxss文件font-face中的url不接受HTTP地址参数,但是接受base64,因此而我们可以将字体文件下载后转化为base64. 方案如下: 1、到阿里巴巴矢量图标库(iconfont-阿里

    2024年02月04日
    浏览(42)
  • CSS animation动画使用详解

    目录 一、animation动画的使用步骤 第一步:定义动画 第二步:使用动画 二、animation的复合属性 三、animation的拆分属性 四、动画属性 animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时的状态 逐帧动画(配合精灵图使用) animation-timing-function:step(N) N为将动

    2024年02月16日
    浏览(39)
  • Vue使用Animate.css

    说一下Animate.css这个动画库,很多的动画在这个库里面都定义好了,我们用的时候可以直接使用里面的类名就可以了,就是直接目标元素绑定对应的类名就可以实现动画效果,非常方便,库其实也相对简单,使用起来也简单。这里示例就以v3为例了,v2也是一样的 github:https

    2024年02月11日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包