微信小程序如何使用Animate.css最新版4.1.1

前言

在网上找了很多相关的教程,很多文章都是出自一个人,而且使用animate的版本都是3.x的版本,比较老,官网最新的很多效果都不能使用,所以就研究了下,写个最新版的教程,可以给用到的人得到点帮助。

一、下载

// 下载后别忘记把后缀名修改为wxss
https://github.com/animate-css/animate.css/blob/main/animate.css

二、引用

// 将下载的文件放入小程序根目录utils文件夹下
// 在app.wxss下引用
@import "/utils/animate.wxss";

三、修改animate.wxss

:root修改为page

四、使用

<!-- 第一个参数是固定,第二个参数是效果。还有循环次数,延迟等参数,具体看官网文档就可以了-->
<view class="animate__animated animate__bounce">效果展示</view>

五、Demo

在这里插入图片描述

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
在uniapp微信小程序使用three.js导入gltf模型包,你可以按照以下步骤进行操作: 1. 将gltf模型文件放置在uniapp项目的静态资源目录中,比如`static/models`。 2. 在uniapp页面或组件的js文件中引入three.js库和GLTFLoader。 ```javascript import * as THREE from 'three'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; ``` 3. 创建一个canvas元素作为渲染器的渲染目标。 ```html <template> <canvas id="canvas"></canvas> </template> ``` 4. 在mounted钩子函数中编写加载和渲染模型的代码。 ```javascript mounted() { const canvas = document.getElementById('canvas'); const renderer = new THREE.WebGLRenderer({ canvas }); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000); camera.position.z = 5; const loader = new GLTFLoader(); loader.load('../../static/models/model.gltf', (gltf) => { const model = gltf.scene; scene.add(model); // 设置模型的初始位置、旋转等属性 model.position.set(0, 0, 0); model.rotation.set(0, 0, 0); model.scale.set(1, 1, 1); }); function animate() { requestAnimationFrame(animate); // 更新模型、相机等状态 renderer.render(scene, camera); } animate(); } ``` 请确保将`../../static/models/model.gltf`替换为你实际的模型文件路径。 这样,当页面或组件加载后,就会渲染gltf模型在canvas上。 希望对你有所帮助!如有其他问题,请继续提问。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值