css3动画Animate.css插件与wow.js插件

最新推荐文章于 2022-10-25 19:23:33 发布
最新推荐文章于 2022-10-25 19:23:33 发布
阅读量447 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43198803/article/details/85158818
版权

1.在https://www.awesomes.cn/repo/daneden/animate-css中下载文件(里面也有详细的用法)

2.插件描述：WOW.js 是一款帮助你实现滚动页面时触发CSS 动画效果的插件，去http://www.jq22.com/jquery-info1705查看使用

例如：

 

3.

在页面的 <head>中引入样式文件：

<head>
<link rel="stylesheet" href="animate.min.css">
</head>

4.在class名中加入你想用的样式名

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • swing
  • tada
  • wobble
  • jello
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • hinge
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp

5.如果不知道什么名称是什么效果，可以去https://daneden.github.io/animate.css/?看对应的效果，再使用

 

那盏不亮的呼吸灯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
rthreejs, 用于 R 和发光的Three.js 部件.zip
10-10
rthreejs, 用于 R 和发光的Three.js 部件 Three.js 和 R用于 R 和发光的Three.js 部件。 软件包包括graphjs: 交互式网络可视化小部件scatterplot3js: 类似于scatterplot3d函数但比函数更有限的3-d 散点图globej
wow.min.js和animate.css
04-20
"wow.min.js" 和 "animate.css" 是两个非常有用的工具，它们共同为网页添加了丰富的CSS3动画效果。接下来，我们将深入探讨这两个组件的工作原理、如何使用以及它们在网页设计中的应用。 首先，"wow.min.js" 是一个...
二、animate.css动画插件
qianduankaifawz的博客
10-25 1724
css3动画库，预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、旋转（rotateIn|rotateOut）、翻转（flip）、淡入淡出（fadeIn|fadeOut）等动画效果。1、过渡动画是需要触发条件的(hover事件或click事件等)，只能完成简单的动画。2、加统一的类名animated，然后选择自己想要的动画效果，然后复制粘贴。第一个animated是必须添加的样式名，第二个是指定的动画样式名。2、帧动画不需要任何的触发条件，可以完成复杂轨迹的动画。
Html5+Threejs炫酷灯光效果-流光、追光 呼吸灯效果
热门推荐
ALLENJIAO的专栏
09-21 1万+
Html5+Threejs炫酷灯光效果-流光、追光 呼吸灯效果
three.js 绘制边框线
qq_41026858的博客
02-23 2803
vue+three.js 边框线是在模型上添加一个边框，而不是发光呼吸灯，如果需要模型发光效果 可以看一下我的另一篇文章 模型发光 效果图： var material = new THREE.MeshPhongMaterial({ color: 0xccebff, specular: 0x00ff00, transparent: true, opacity: 0.5 }) var geometry = new THR
css3-animation超级好用的动画小插件
wanglufei_1992的博客
12-21 3737
css3小动画，实在是丰富了前端展示页面的效果。虽然IE8不兼容（爱兼容不兼容，奏是这么傲娇）。但是在谷歌，火狐表现都 没差。今天就介绍一个css3动画小插件，分分钟满足你实现各种妖魔化动画效果。 1.需要引入css文件：animate.css 2.引入js文件：wow.min.js 3.找到页面中需要添加动画的元素添加class;比如：wow fadeInRight animated an...
滚动页面动画文件 wow.js animate.css
08-22
1：网站页面滚动效果文件分为两个分别是：1、单页面如何使用 2、 vue中如何使用使用 2：文件包括animate.css 和 wow.js 3：点击dome.html直接运行 4：css动画基于animate.css的样式，当然也可以自己写@keyframes
jsAnimate:一个js特效插件库jsAnimate，无需css即可实现懒加载过渡动画（结合了animate.css、wow.js、vue-transition的特点）、轮播图、旋转木马等特效。 a js-efficiency-plugin, no need css
04-28
jsAnimate（只需一个 js，无须 css，即可实现懒加载过渡动画（综合实现了类似 animate.css、wow.js、vue-transition 的功能）、轮播图、旋转木马等特效，可在页面任一处复用，自适应页面尺寸变化，所有方法都在 ...
animate.css-main.zip
01-20
这通常是一个Wow.js插件的压缩版，它与Animate.css配合使用，可以检测浏览器滚动事件，并在元素进入视口时触发对应的Animate.css动画。Wow.js使得动画更智能，只有当用户滚动到特定元素时才会播放动画，增加了性能...
WOW.js-元素在页面滚动时展示CSS3动画JS插件特效代码
03-20
总结，WOW.js是一个强大且灵活的JavaScript插件，它让网页元素在滚动时展现CSS3动画变得轻而易举。无论你是要创建一个吸引人的首页，还是希望为用户导航增加趣味性，WOW.js都是一个值得考虑的工具。结合自定义动画库...
Threejs城市道路管道流光效果
05-08
利用TubeGeometry来实现管道，贴图纹理采用带透明处理的渐变png图片，可以简单的模拟出城市道路流光效果。 如果增大THREE.TubeGeometry(path, 100, 0.2);中的第3个参数将管道增粗，就可以模拟管道三维流动，可以方便地实现模拟工厂、园区的管道（输气管道、输水管道、输油管道等）液体气体流动，并实现根据流向、流速对管道进行三维动态模拟效果。  
micron.js可生成炫酷CSS3动画的js动画库的插件
11-21
micron.js是一个可生成炫酷CSS3动画的js动画库的插件。通过micron.js插件，你可以为页面的任意DOM元素添加12种炫酷CSS3动画效果。并能通过js代码或html5 data属性来串联各种CSS3动画效果。简单实用，欢迎下载！本代码适用浏览器：搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗，不支持IE8及以下浏览器，首选火狐浏览器。是一款不错的的特效插件，需要的朋友可以下载！希望大家喜欢！
canvas createjs实现美丽夜空，流星，月亮，闪烁星星，飘落雪花
09-02
实现了一幅美丽的夜空图像，包括月亮，消失的流星，不停闪烁旋转的星星，不停飘落的雪花，一幅冬夜里的美丽图画，代码简单，对于初学者有一定借鉴意义
JS animate 插件
12-11
JS animate 插件 原生
基于animate.css的插件库wow.js学习记录
weixin_44089544的博客
02-16 367
基于animate.css的插件库wow.js学习记录 昨天学习了一个超级实用简单的动画库animate.css 往期回顾 - - ： 今天继续学习一个基于animata.css的动画类库wow.js 官方网址：https://www.delac.io/wow/ 下载地址：https://github.com/matthieua/WOW/blob/master/dist/wow.js 说明：WOW...
制作微信单页，全屏浏览，网站动画，CSS3动画，animate.css是一个不错的选择
麻球科技
12-29 1396
Animate.css是一个有趣的，跨浏览器的css3动画库。很值得我们在项目中引用。 用法 1、首先引入animate css文件 1 2 3 head>   link rel="stylesheet" href="animate.min.css"> head> 2、给指定的
CSS3 动画插件 aos.js
Admans的专栏
07-21 945
aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件。该动画库可以在页面滚动时提供28种不同的元素动画效果，以及多种easing效果。在页面往回滚动时，元素会恢复到原来的状态。 安装 yarn add aos@next 或者 npm install --save aos@next import AOS from 'aos'; import 'aos/dist/aos.css'; AOS.init(); 手动添加 文件下载地址：https://download.csdn.net/do.
Animate.css插件与CSS动画
catherine_sfy的博客
01-24 517
Animate.css动画效果演示： http://www.jq22.com/yanshi819 引入animate.css很容易，有以下几种方法： 官网下载地址： https://raw.github.com/daneden/animate.css/master/animate.css 或者使用在线cdn： https://unpkg.com/animate.css@3.5.2/animate....
H5广告动画+animate.js
BowenHero的博客
01-27 1341
<template> <div class="main"> <div class="swiper-container"> <div class="swiper-wrapper"> <!-- 公司介绍 --> <div class="swiper-slide"> <div class="swiper-slide-content first-content-
Vue3使用wow.js动画库
最新发布
05-20
要在Vue3中使用wow.js动画库，您可以按照以下步骤： 1. 安装wow.js和animate.css库： ``` npm install wow.js animate.css --save ``` 2. 在您的Vue组件中引入wow.js和animate.css： ```javascript import WOW ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值