<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
</head>
<body>
<h1 class="animated infinite bounce delay-2s">Example</h1>
<!-- infinite：无限循环播放 bounce：字体的样式在animated.css网上复制 delay-2s：延迟2s开始播放-->
<h1 class="animated zoomOutLeft">哈哈哈</h1>
<p id="test">hello wirld</p>
<p class="animated" id="second">test</p>
<!-- 通过js实现鼠标进过和鼠标点击时的文字特效 -->
<script>
var test = document.getElementById("test");
test.onmouseover = function () {
this.classList.add("animated")
this.classList.add("shake");
}
test.onmouseout = function () {
this.classList.remove("shake")
}
var second = document.getElementById("second");
second.onclick = function () {
this.classList.add("animated")
this.classList.add("shake");
}
second.onmouseover = function () {
this.classList.remove("shake")
}
</script>
</body>
