实际开发中,并不是所有效果都要我们自己写,有的时候,要善用、会用别人造好的“轮子”。如果想使用这些“轮子”,就要会读它们的官方文档,因此读官网的能力很重要。Animate.css就是这些“轮子”中的一个,它是一个css动画库。接下来,让我们读一下它的官方文档,按照官网的说明,实现如下效果吧!
效果图:
登录后即可发布作业,立即登录
我的作业
全部作业 202
<!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>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<style>
div {
width: 200px;
height: 200px;
background: red;
margin: 20px auto;
animation: animate__backInLeft 2s linear 0s infinite;
}
</style>
</head>
<body>
<div class="animate__backInLeft"></div>
</body>
</html>