animate.css最简单的动画效果

最新推荐文章于 2022-07-27 16:21:00 发布

盖被子的冰块

最新推荐文章于 2022-07-27 16:21:00 发布

阅读量220

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/A_Xi_Baa/article/details/116248751

版权

前端开发专栏收录该内容

6 篇文章 3 订阅

订阅专栏

这篇博客介绍了如何在HTML中结合Animate.css库创建一个无限循环的滚入屏幕动画效果。通过添加特定的类名如'animate__rollIn'和'animate__infinite'，可以实现图片的持续滚动动画。文章提供了代码示例和相关参考资料链接，帮助读者理解和应用这种动画效果。

摘要由CSDN通过智能技术生成

目录结构

img

    demo.png

index.html

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
	</head>
	<body>
		<!-- animate__delay-2s  动画延迟 -->
		<!-- animate__faster 动画执行速度 -->
		<!-- animate__repeat-2 动画循环次数  animate__infinite 无限 -->
		<img src="img/demo.png" class="animate__animated animate__rollIn animate__infinite"/>
	</body>
</html>

参考：

动画库

https://www.dowebok.com/demo/2014/98/

动画属性

https://animate.style/

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

盖被子的冰块

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

css动画效果

m0_51431448的博客

03-23

1万+

动画1（沿着椭圆转动）其实是个2D转动，只不过咱们设置椭圆，然后加上scale缩放（近大远小），看上去就是3D效果代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con...

CSS完成简单的动画效果

weixin_57298639的博客

06-05

677

网页中，需要制作一些动画，来丰富你的网页，如果你会用flash的话，自然是极好的，不过，Adobe Flash Player在2020年已经宣布停止更新支持，flash

1 条评论您还未登录，请先登录后发表或查看评论

CSS简单动画效果

weixin_30496751的博客

06-20

一、注意事项： 1. 如需学习css动画，必须先掌握@keyframes的规则，在@keyframes 中规定某项Css样式，就能创建由当前样式逐渐该为新样式的动画效果 2. 在使用@keyframes规则时，需要注意浏览器的兼容性问题，不同浏览器兼容性不同： Internet Explorer 10、Firefox以及支持@keyframes规则和animation属性 Chro...

CSS-简单动画效果

08-12

315

简单的图标扩散动画，重点备注效果为一个心脏跳动 Body： <div id="img_head_back"> <img src="img/邮箱(1).png" class="img_head_back_1" > </div> Css： .img_head_back_1{ margin: auto; position:...

CSS3动画效果-animate.css

WEBCODE

07-09

218

animate.css 是提供炫酷，有趣，跨浏览器css3动画的网站，你可以在高级项目中使用这些效果，为高级浏览器用户提供更好的交互体验。动画效果包括强调突出，滑块，淡入淡出，放大缩小等等。你也可以结合jQuery一起使用，例如$(‘.bouncy’).addClass(‘bounceInDown’); 项目主页：http://daneden.me/animate/ git地址：...

CSS animate动画效果

weixin_53027472的博客

07-27

1686

css animation动画简述

CSS的动画效果animation

秃头少女不秃头的博客

12-11

317

CSS的动画效果animation首先设置动画规则调用动画首先设置动画规则 //move为自定义的动画名称 @-webkit-keyframes move{ 0%{ //设置CSS样式属性 left:？ top:? } 25%{ left:？ top:? } 50%{ left:？ top:? } 75%{ left:？ top:? } ...

animate.css在vue项目中的使用教程

12-09

在 Vue.js 项目中，我们可以通过简单的步骤来利用 Animate.css 提供的动画效果。Vue.js 自带了过渡系统，但如果你想要直接使用 Animate.css 的动画，可以按照以下方法操作。 ### 安装 Animate.css 首先，你需要在 ...

animate.rar

05-08

总的来说，"animate.rar" 提供了一套简便的动画解决方案，通过`wow.min.js`的视口检测与`animate.min.css`丰富的动画效果结合，为网页设计师和开发者提供了一个强大的工具，帮助他们在网页设计中创造引人注目的交互...

react-animate-on-scroll:当用户滚动时，React组件提供动画

04-30

在滚动上React动画使用对组件进行响应以使滚动中的元素动画化。受启发安装： npm install react-animate-on-scroll --save 如果要使用animate.css中的动画，请确保在项目中以...最简单的用法： import ScrollAn

tab动画 vue_Vue实现Tab标签路由效果并用Animate.css做转场动画效果的代码

weixin_39893274的博客

12-24

436

类似于浏览器窗口一样的路由切换逻辑，看着还是挺高大上的，本以为有很多高级的玩意儿，奈何复杂的东西总是由简单的东西拼接而成的，这个功能也不例外。本篇文章主要描述两个问题：如何实现这种Tab标签页的路由效果如何为路由切换添加转场动画。该功能的开发主要使用到 AntDesignVue 组件库的Tab组件和 Animate.css效果如下：Tab标签页实现首先是该组件的模板部分， ContextMenu...

css3的简单动画效果（animation和transition）

weixin_37552710的博客

07-18

623

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。（1）平移translate(x值，y值) （2）旋转rotate(角度) ex:rotate(45deg); 正数为顺时针旋转。（3）倾斜skew(水平倾斜，垂直倾斜) ex:skew(20deg,3odeg) 原点为盒子的中心点（水平方向为y轴，垂直方

简单的css3动画效果

weixin_44540471的博客

02-02

465

开发工具与关键技术：html+css3 作者：李伙撰写时间： 2019年2月2日 css3中的transition可以实现一些简单的动画效果，可以让我们的页面布局更加完美；下面是一个小小的例子；首先设置一个div，在里面存放图片 <div class="container"> <img src="../img/mm4.jpg" alt=""> <i...

一个CSS3简单动画效果

weixin_44540705的博客

01-26

405

开发工具与关键技术：DW 一个CSS3简单动画效果作者：赖文扬撰写时间：2019年1月25日首先直接创建一个CSS文件，创建好了文件之后就编写动画的效果，首先选择所有并设置它的外边距、内边距为0。（下面截图）设置好了边距之后，就用@keyframes规则来创建编写动画代码，（下面截图）编写了动画代码之后，用一个div的类来编写动画的宽度、高度、边距，（下面截图）然后再...

css---学习之路（使用css实现简单的动画效果）

小牛叹气生活不易的博客

06-28

810

使用css实现简单的动画效果

简单css实现3d动画效果

qq_36109477的博客

09-24

871

知识储备 transition: transform 10s; 过度的变形时间为10s transform-style: preserve-3d; 变形的样式是3d变化 relative和absolute：相对定位和绝对定位 relative相对于原来文本框进行定位，定位后原来的空间不删除；absolute相对于整个页面进行定位，定位后原来的空间删除。 ...

jquery的animate（简单动画）

07-19

直接上代码 <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"&g...

Animate.css 动画效果

weixin_42645716的博客

02-19

1683

api文档说明地址： http://www.dowebok.com/98.html 动画演示地址： http://www.dowebok.com/demo/2014/98/ 百度云盘下载地址： https://pan.baidu.com/s/1ntFjwAt animate.min.css 下载地址： https://download.csdn.net/download/weixin_426457...

最简代码vue+elementui实现增删改查(带后台接口)，单数据和单模态

最新发布

05-30

好的，我会根据你的要求为你编写一个登录页面，并实现Tab栏的切换和动画效果。首先，我们需要引入相关的依赖： ``` // 安装react-transition-group和animate.css npm install react-transition-group animate.css ``` 接着，我们开始编写代码。先看一下整体的代码结构： ``` import React, { useState } from "react"; import { CSSTransition } from "react-transition-group"; import "animate.css"; function Login() { const [loginType, setLoginType] = useState("account"); const handleTabClick = (type) => { setLoginType(type); }; return ( <div className="login"> <div className="tabs"> <div className={`tab ${loginType === "account" ? "active" : ""}`} onClick={() => handleTabClick("account")} > 账号登录 </div> <div className={`tab ${loginType === "qrcode" ? "active" : ""}`} onClick={() => handleTabClick("qrcode")} > 二维码登录 </div> </div> <div className="content"> <CSSTransition in={loginType === "account"} timeout={300} classNames="fade" unmountOnExit > <div className="account-login"> {/* 账号登录表单 */} </div> </CSSTransition> <CSSTransition in={loginType === "qrcode"} timeout={300} classNames="fade" unmountOnExit > <div className="qrcode-login"> {/* 二维码登录表单 */} </div> </CSSTransition> </div> </div> ); } export default Login; ``` 我们先来看一下`handleTabClick`这个函数。这个函数的作用是根据当前点击的Tab来设置登录类型，即`loginType`的值。我们在Tabs中给每个Tab添加了一个`onClick`事件，当点击时调用`handleTabClick`函数。接着，我们在`content`中使用了`CSSTransition`组件。这个组件可以根据`in`属性的值来控制它所包含的子组件的出现和消失。当`in`的值为true时，它所包含的子组件会显示出来；当`in`的值为false时，它所包含的子组件会被隐藏起来。 `timeout`属性控制了子组件的进入和退出动画的时间，单位是毫秒。 `classNames`属性指定了进入和退出动画的类名，我们这里使用了`fade`类名，这个类名是在animate.css中定义的一个渐变动画。 `unmountOnExit`属性控制了当子组件退出时是否卸载掉这个组件，我们这里设置为true，表示当子组件退出时会被卸载掉。在`CSSTransition`中，我们根据`loginType`的值来决定显示哪个子组件。当`loginType`的值为`account`时，显示账号登录表单；当`loginType`的值为`qrcode`时，显示二维码登录表单。最后，我们还需要在CSS中定义一些样式： ``` .login { display: flex; flex-direction: column; align-items: center; } .tabs { display: flex; justify-content: center; margin-top: 50px; } .tab { font-size: 16px; padding: 10px 20px; margin-right: 20px; cursor: pointer; transition: all 0.3s ease-out; } .tab.active { background: #1890ff; color: #fff; } .content { margin-top: 50px; width: 400px; } .account-login { padding: 20px; background: #fff; border: 1px solid #ddd; } .qrcode-login { padding: 20px; background: #f5f5f5; border: 1px solid #ddd; } /* 渐变动画 */ .fade-enter { opacity: 0; } .fade-enter-active { opacity: 1; transition: opacity 300ms ease-out; } .fade-exit { opacity: 1; } .fade-exit-active { opacity: 0; transition: opacity 300ms ease-out; } ``` 这里我们使用了flex布局，让登录框居中显示。Tabs的样式比较简单，就是一些基本的样式设置。`tab.active`表示当前选中的Tab的样式。 `.account-login`和`.qrcode-login`分别表示账号登录表单和二维码登录表单的样式。最后，我们定义了`fade`动画的进入和退出样式。在`.fade-enter`和`.fade-exit`中设置初始和结束状态，在`.fade-enter-active`和`.fade-exit-active`中设置动画过渡效果。这样，我们就完成了登录页面的编写，实现了Tab栏的切换和动画效果。