<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>
