HTML5動(dòng)畫旋轉(zhuǎn)是網(wǎng)頁設(shè)計(jì)中很有趣的一種特效，讓網(wǎng)頁更加生動(dòng)有趣。下面是一份HTML5動(dòng)畫旋轉(zhuǎn)代碼的示例：
<!DOCTYPE html>
<html>
<head>
<title>HTML5動(dòng)畫旋轉(zhuǎn)示例</title>
<meta charset="utf-8">
<style>
#box {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
animation: rotation 2s infinite linear;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>在上面的代碼中，我們使用CSS3動(dòng)畫特性來實(shí)現(xiàn)旋轉(zhuǎn)特效。我們首先定義一個(gè)名為“box”的div元素，將其設(shè)為藍(lán)色背景色，寬高為100px，并使用絕對定位和居中的方式將其擺放在頁面中央位置。我們給這個(gè)“box”元素添加一個(gè)名為“rotation”的動(dòng)畫效果，設(shè)置為無限循環(huán)，持續(xù)2秒，動(dòng)畫采用線性方式進(jìn)行。
我們又使用了CSS3關(guān)鍵幀動(dòng)畫技術(shù)，在“@keyframes”后面，我們定義了動(dòng)畫從開始旋轉(zhuǎn)0度到結(jié)束旋轉(zhuǎn)360度的動(dòng)畫效果。最后在HTML文檔中使用了這個(gè)div元素，作為演示旋轉(zhuǎn)特效的演示物品。
以上就是一份HTML5動(dòng)畫旋轉(zhuǎn)代碼的示例，歡迎大家在頁面設(shè)計(jì)中嘗試使用哦！