数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究使用 HTML、CSS 和 AOS.js 在滚动时添加动画
AOS.js（滚动动画）是一个提供动画的 JavaScript 库，它可以通过简单地更改您想要添加动画的div标签中的类名来更轻松地添加大量动画。虽然有不同的动画 JavaScript 库，但 AOS.js 可能是其中最简单的。
在本教程中，我们将通过不同的示例探索可以在 AOS.js 中使用的不同类型的动画。
我们将探索的第一类动画是淡入淡出动画。在开始之前，我们需要确保aos.css和aos.js在我们的代码中可用，我们可以通过 CDN 链接获取它们。
您只需要将以下代码片段粘贴到 HTML 代码的<head>标签的末尾。
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
以上代码片段将有助于获取css文件，为了获取js文件，我们需要将下面显示的 CDN 代码片段粘贴到 HTML 代码的 body 标签末尾。
<script src="https://unpkg.com/aos@next/dist/aos.js"></script> <script> AOS.init(); </script>
在 HTML 代码中添加了以上两个代码片段后，我们就可以在代码中使用 AOS 了。
使用 AOS.js 实现淡入淡出动画
淡入淡出动画模拟淡入淡出的行为，总共有 8 种不同的动画可以通过它实现。它们是：
fade-up
fade-down
fade-left
fade-right
fade-up-left
fade-up-right
fade-down-left
fade-down-left
现在让我们在一个简单的 HTML-CSS 示例中逐一使用它们。
以下代码片段是我们将在所有上述淡入淡出动画中进行更改的唯一部分。
<div id="main"> <div data-aos="fade-up">Something up!</div> </div>
在上面的代码中，我们将值作为“fade-up”传递给data-aos属性，在所有淡入淡出的情况下，只有此值将被更改。
index.html
现在，让我们考虑以下index.html文件，我们将在其中执行“fade-up”动画。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AOS - Animation</title>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<style>
body {
text-align: center;
font-size: 150%;
margin: 0 auto;
top: 20%;
}
#main {
width: 100%;
text-align: center;
margin: 0 auto;
padding: auto;
clear: both;
height: 150px;
background: #FFF;
background-color: rgb(206, 152, 152);
background-image: none;
border-radius: 2px;
padding: 10px;
border: rgb(80, 20, 20);
border-radius: 2px;
}
</style>
</head>
<body>
<div id="main">
<div data-aos="fade-up">Something Up!</div>
</div>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
当您在浏览器中运行以上代码时，您应该会看到一个包含文本“Something Up！”的div，它会以淡入动画向上出现。
类似地，如果我们想要执行淡出动画，我们可以使用下面代码片段中显示的<div>。
<div id="main"> <div data-aos="fade-down">Something down!</div> </div>
我们只需要用上面的 div 替换 index.html 文件中的<div>，即可获得淡出动画。
对于Fade-left，代码片段如下所示。
<div id="main"> <div data-aos="fade-left">Something left!</div> </div>
对于Fade-right，代码片段如下所示。
<div id="main"> <div data-aos="fade-right">Something right!</div> </div>
对于Fade-up-left，代码片段如下所示。
<div id="main"> <div data-aos="fade-up-left">Something up left!</div> </div>
对于Fade-up-right，代码片段如下所示。
<div id="main"> <div data-aos="fade-up-right">Something up right!</div> </div>
对于Fade-down-left，代码片段如下所示。
<div id="main"> <div data-aos="fade-down-left">Something down left!</div> </div>
对于Fade-down-right，代码片段如下所示。
<div id="main"> <div data-aos="fade-down-right">Something down right!</div> </div>
至此，我们可以得出结论，AOS 中的淡入淡出动画已完成。
使用 AOS.js 实现翻转动画
翻转动画模拟翻转行为，总共有 4 种不同的动画可以通过它实现。它们是：
flip-up
flip-down
flip-left
flip-right
现在让我们在一个简单的 HTML-CSS 示例中逐一使用它们。
index.html
让我们考虑以下index.html文件，我们将在其中执行“flip-up”动画。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AOS - Animation</title>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<style>
body {
text-align: center;
font-size: 150%;
margin: 0 auto;
top: 20%;
}
#main {
width: 100%;
text-align: center;
margin: 0 auto;
padding: auto;
clear: both;
height: 150px;
background: #FFF;
background-color: rgb(206, 152, 152);
background-image: none;
border-radius: 2px;
padding: 10px;
border: rgb(80, 20, 20);
border-radius: 2px;
}
</style>
</head>
<body>
<div id="main">
<div data-aos="flip-up">Flip Up!</div>
</div>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
当您在浏览器中运行以上代码时，您应该会看到一个包含文本“Flip Up！”的div，它会以翻转动画向上出现。
类似地，如果我们想要执行翻转向下动画，我们可以使用下面代码片段中显示的<div>。
<div id="main"> <div data-aos="flip-down">Flip down!</div> </div>
对于Flip-left，代码片段如下所示。
<div id="main"> <div data-aos="flip-left">Flip left!</div> </div>
对于Flip-right，代码片段如下所示。
<div id="main"> <div data-aos="flip-right">Flip right!</div> </div>
使用 AOS.js 实现缩放动画
缩放动画模拟缩放行为，总共有 8 种不同的动画可以通过它实现。它们是：
- zoom-in
- zoom-in-up
- zoom-in-down
- zoom-in-left
- zoom-in-right
- zoom-out
- zoom-out-up
- zoom-out-down
- zoom-out-left
- zoom-out-right
现在让我们在一个简单的 HTML-CSS 示例中逐一使用它们。
index.html
让我们考虑以下index.html文件，我们将在其中执行“zoom-in”动画。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AOS - Animation</title>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<style>
#body {
text-align: center;
font-size: 150%;
margin: 0 auto;
top: 20%;
}
#main {
width: 100%;
text-align: center;
margin: 0 auto;
padding: auto;
clear: both;
height: 150px;
background: #FFF;
background-color: rgb(206, 152, 152);
background-image: none;
border-radius: 2px;
padding: 10px;
border: rgb(80, 20, 20);
border-radius: 2px;
}
</style>
</head>
<body>
<div id="main">
<div data-aos="zoom-in" data-aos-duration="3000">Zoom in!</div>
</div>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
当我们在浏览器中运行以上代码时，我们应该会看到一个包含文本“Zoom”的div，它会以缩放动画向上出现。
类似地，如果我们想要执行zoom-in-up 动画，我们可以使用下面代码片段中显示的<div>。
<div id="main"> <div data-aos="zoom-in-up">Zoom in up!</div> </div>
对于Zoom-in-down，代码片段如下所示。
<div id="main"> <div data-aos="zoom-in-down">Zoom in down!</div> </div>
对于Zoom-in-left，代码片段如下所示。
<div id="main"> <div data-aos="zoom-in-left">Zoom in left!</div> </div>
对于Zoom-in-right，代码片段如下所示。
<div id="main"> <div data-aos="zoom-in-right">Zoom in right!</div> </div>
类似地，如果我们想要执行zoom-out 动画，我们可以使用下面代码片段中显示的<div>。
<div id="main"> <div data-aos="zoom-out">Zoom out!</div> </div>
对于Zoom-out-up，代码片段如下所示。
<div id="main"> <div data-aos="zoom-out-up">Zoom out up!</div> </div>
对于Zoom-out-down，代码片段如下所示。
<div id="main"> <div data-aos="zoom-out-down">Zoom out down!</div> </div>
对于Zoom-out-left，代码片段如下所示。
<div id="main"> <div data-aos="zoom-out-left">Zoom out left!</div> </div>
对于Zoom-out-right，代码片段如下所示。
<div id="main"> <div data-aos="zoom-out-right">Zoom out right!</div> </div>
使用 AOS.js 实现多设置动画
在我们上面所有的示例中，我们都只使用了一种动画，没有任何其他选项，但 AOS.js 也允许我们在动画中使用选项。例如，考虑我们想要一个fade-down动画，但希望它持续一段时间的情况。
在下面的代码片段中，我们将创建一个fade-down动画，并为其附加一个持续时间。
<div id="main"> <div data-aos="fade-down" data-aos-duration="3000"></div>>Fade Down With Duration!</div> </div>
结论
在本教程中，我们演示了如何使用 AOS.js、HTML 和 CSS 在滚动时创建动画。
3K+ 阅读量
