HTML5的出現為網頁設計帶來了許多新的特性，其中一個很有用的特性是使用CSS3動畫來制作菊花效果。下面是一段HTML5菊花代碼：
<!DOCTYPE html>
<html>
<head>
<title>菊花效果</title>
<style>
.loading {
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -25px;
border: 5px solid #000;
border-top: 5px solid #fff;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s infinite linear;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="loading"></div>
</body>
</html>在這個代碼中，我們使用了CSS3的動畫特性來制作菊花效果。.loading類設置了CSS樣式來設置菊花的大小、顏色、邊框和位置。我們還使用了@keyframes來定義動畫，使菊花可以旋轉。最后我們將這個效果添加到一個Div容器中，就可以在網頁中顯示出這個菊花效果了。
上一篇js清空css內聯樣式