所见即所得的动画效果:Animate.css

我们可以在集成Animate.css来改善界面的用户体验,省掉大量手写css动画的时间。
官网:Animate.css

使用

1、安装依赖

npm install animate.css --save

2、引入依赖

import 'animate.css';

3、在项目中使用
class类名上animate__animated是必须的,animate__flipInX为你应用的动画效果

<div class="animate__animated animate__flipInX">动画</div>

在这里插入图片描述


定义动画的持续时间、延迟和迭代

Animate.css 使用自定义属性(也称为 CSS 变量)来定义动画的持续时间、延迟和迭代。

/* This only changes this particular animation duration */
.animate__animated.animate__flipInX {--animate-duration: 2s;
}

这里就可以将animate__flipInX动画的持续时间修改为2s

定义全局动画的持续时间、延迟和迭代

/* This only changes this particular animation duration */
:root {--animate-duration: 5s !important;
}

也可以直接在标签上定义延迟、持续时间等效果

 <div class="animate__animated animate__flipInX animate__delay-2s">动画</div>

在这里animate__delay-2s动画延迟了2s


不影响自定义的css动画

你也可以自定义css动画效果覆盖animate.css的动画

 <div class="mouse_chunk animate__animated animate__flipInX animate__delay-2s">动画</div>
.mouse_chunk {width: 100px;height: 50px;animation: custom 1s;}@keyframes custom {0%{width: 100px;}100%{width: 150px;}}

如果觉得这篇文章对你有帮助,欢迎点赞👍、收藏💖、转发✨哦~

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

轻松预览:Axure RP在线原型展示指南,快速掌握!

当UI设计师想要提供功能和细节丰富的原型时&#xff0c;可以使用原型设计工具预览Axure原型。原型设计工具Axurerp作为线框图和原型制作工具的创始人&#xff0c;功能非常强大。取代Axure的国产原型设计工具即时设计&#xff0c;界面布局清新&#xff0c;非常适合复杂的原型设计…

黑马程序员微服务 第五天课程 分布式搜索引擎2

分布式搜索引擎02 在昨天的学习中&#xff0c;我们已经导入了大量数据到elasticsearch中&#xff0c;实现了elasticsearch的数据存储功能。但elasticsearch最擅长的还是搜索和数据分析。 所以今天&#xff0c;我们研究下elasticsearch的数据搜索功能。我们会分别使用DSL和Res…

【KCC@南京】KCC南京数字经济-开源行

一场数字经济与开源的视听盛宴&#xff0c;即将于11月26日&#xff0c;在南京举办。本次参与活动的有&#xff1a; 庄表伟&#xff08;开源社理事执行长、天工开物开源基金会执行副秘书长&#xff09;、林旅强Richard&#xff08;开源社联合创始人、前华为开源专家&#xff09;…

如何构建风险矩阵?3大注意事项

风险矩阵法&#xff08;RMA&#xff09;是确定威胁优先级别的最有效工具之一&#xff0c;可以帮助项目团队识别和评估项目中的风险&#xff0c;帮助项目团队对风险进行排序&#xff0c;清晰地展示风险的可能性和严重性&#xff0c;为项目团队制定风险管理策略提供依据。 如果没…

Word或者WPS批量调整文中图片大小的快捷方法

文章目录 0、前言1、编写宏代码2、在文档中调用宏实现一键批量调整3、就这么简单&#xff01; 0、前言 不知道大家是不是也和我一样&#xff0c;经常需要在编写的Word&#xff08;或者WPS&#xff09;文档里插入大量的图片&#xff0c;但是这些图片的尺寸大小一般都不一样&…

信创之路数据库人大金仓篇

概要 信创大势所趋&#xff0c;吾等上下求索 参考文档 Linux&#xff1a;人大金仓数据库-KingBaseES V8与 php7的连接配置 laravel9适配人大金仓&#xff08;kingbase&#xff09;数据库 thinkphp6适配人大金仓&#xff08;Kingbase&#xff09;数据库 数据库选型 目前比较…

Django(七、模型层)

文章目录 模型层模型层前期准备使用django ORM要注意 代码演示&#xff1a;切换MySQL数据库如何查看django ORM 底层原理&#xff1f; 单表操作模型层之ORM常见关键字基础的增删改查常用的关键字 常见的十几种查询基于双下滑线的查询 模型层 模型层前期准备 使用django ORM要…

ATE测试工程师的薪资前景如何?能转DFT工程师吗?

在芯片行业&#xff0c;ATE测试工程师扮演着至关重要的角色。他们不仅需要理解电路和芯片内部的工作原理&#xff0c;还需要利用各种测试工具和方法对芯片进行精确的测试和分析。那么ATE测试工程师前景如何&#xff1f;需要具备哪些技能要求呢&#xff1f; 首先来了解什么是AT…

【技巧】Windows 11 如何安装日文语言包和日文系统

Windows 11 如何安装日文语言包和日文系统 安装日语语言第一步&#xff1a;打开系统设置第二步&#xff1a;选择【时间和语言】选项第三步&#xff1a;点击【添加语言】按钮第四步&#xff1a;输入语言&#xff0c;并选择第五步&#xff1a;安装输入法/语言包第六步&#xff1a…

电池故障估计:Realistic fault detection of li-ion battery via dynamical deep learning

昇科能源、清华大学欧阳明高院士团队等的最新研究成果《动态深度学习实现锂离子电池异常检测》&#xff0c;用已经处理的整车充电段数据&#xff0c;分析车辆当前或近期是否存在故障。 思想步骤&#xff1a; 用正常电池的充电片段数据构造训练集&#xff0c;用如下的方式构造…

php在线审稿系统mysql数据库web结构layUI布局apache计算机软件工程网页wamp

一、源码特点 php在线审稿系统是一套完善的web设计系统mysql数据库 &#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 php在线审稿系统 代码 https://download.csdn.net/download/qq_41221322/885…

【python】Django——django简介、django安装、创建项目、快速上手

笔记为自我总结整理的学习笔记&#xff0c;若有错误欢迎指出哟~ 【Django专栏】 Django——django简介、django安装、创建项目、快速上手 Django——templates模板、静态文件、django模板语法、请求和响应 Django——连接mysql数据库 Django——django安装、创建django项目、dj…

字母不重复的子串-第15届蓝桥第二次STEMA测评Scratch真题精选

[导读]&#xff1a;超平老师的《Scratch蓝桥杯真题解析100讲》已经全部完成&#xff0c;后续会不定期解读蓝桥杯真题&#xff0c;这是Scratch蓝桥杯真题解析第158讲。 第15届蓝桥第2次STEMA测评已于2023年10月29日落下帷幕&#xff0c;编程题一共有6题&#xff0c;分别如下&am…

解决:Android TextView 设置斜体后右侧文字被遮挡

一、问题说明 遇到一个比较奇怪的情况&#xff0c;给 TextView 文字设置倾斜后&#xff0c;右侧的文字会被遮挡&#xff0c;感觉这应该是 Android 的一个 bug &#xff01; 上代码&#xff1a; <TextViewandroid:id"id/tv_title"android:layout_width"wra…

windows与wsl互传文件

1.把windows上的文件传到wsl中&#xff0c;\\wsl.localhost\Ubuntu-22.04\mnt\wsl 将你要传的文件放到wsl这个路径下&#xff0c;Ubuntu-22.04是我的子系统&#xff0c;换成自己对应的 2.把wsl中的文件传到windows中 将wsl中的文件放到 /mnt/c 或 /mnt/d 中&#xff0c;这两…

小红书直播开启新纪元,拓世法宝AI直播一体机助您轻松成为行业标杆!

2023年&#xff0c;小红书终于成功坐上了电商牌桌。 今年3月的“董洁效应”带动了一批品牌商家、博主入驻小红书试水&#xff0c;其直播业务积蓄了巨大势能。10月15日&#xff0c;“初代名媛”章小蕙完成了在小红书的第二场直播&#xff0c;以销售额破亿的成绩打响了小红书双1…

大厂必备的6款React UI框架

优秀的ReactUI框架可以为您节省开发时间&#xff0c;提高开发效率&#xff0c;统一设计语言。你还在为你的项目寻找高质量的ReactUI框架吗&#xff1f;为了让您更容易找到易于使用的UI框架&#xff0c;分享6个优秀的ReactUI框架选项&#xff0c;并介绍了每个UI框架的不同功能和…

Google 向中国开发者开放数百份 TensorFlow 资源

Google 的机器学习框架 TensorFlow 自 2015 年开源后&#xff0c;已然成为 AI 领域最受欢迎的框架。 据统计&#xff0c;在广受欢迎的 Python 编程语言在线软件知识库 PyPi 上&#xff0c;TensorFlow 的下载次数已超过 90 万&#xff0c;其中有 15% 来自中国。谷歌官方博客也表…

Android问题笔记四十四:关于RecyclerView出现Inconsistency detected崩溃

点击跳转>Unity3D特效百例点击跳转>案例项目实战源码点击跳转>游戏脚本-辅助自动化点击跳转>Android控件全解手册点击跳转>Scratch编程案例点击跳转>软考全系列 &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分享&…

AppLink上的小鹅通能实现什么操作呢?

AppLink实现小鹅通信息同步操作 本篇文章给大家演示下小鹅通可在AppLink平台上快速实现的同步操作&#xff0c;1.用户注册或更换手机号信息同步 2.小鹅通产生新的购买订单&#xff0c;订单信息同步。 以下操作均需获得小鹅通授权 授权后登录AppLink操作台&#xff0c;在【我的…