HTML5蝴蝶飛代碼是一種非常有趣的特效，可以給網(wǎng)頁(yè)增加一些生動(dòng)的元素。下面是一個(gè)例子：
<!DOCTYPE html>
<html>
<head>
<title>蝴蝶飛</title>
<style>
#butterfly {
position: absolute;
top: 0;
left: 0;
animation: fly 10s ease-in-out infinite;
}
@keyframes fly {
0% {
top: 0;
left: 0;
}
25% {
top: 25%;
left: 50%;
}
50% {
top: 50%;
left: 100%;
}
75% {
top: 75%;
left: 50%;
}
100% {
top: 100%;
left: 0;
}
}
</style>
</head>
<body>
<div id="butterfly">
<img src="butterfly.png" width="100" height="100">
</div>
</body>
</html>代碼中，我們使用了CSS3的@keyframes來(lái)控制蝴蝶的飛行軌跡，同時(shí)使用了animation屬性使動(dòng)畫(huà)無(wú)限循環(huán)。我們可以通過(guò)修改@keyframes的百分比，來(lái)調(diào)整蝴蝶的飛行路徑。除此之外，我們還需要設(shè)置蝴蝶的起始坐標(biāo)、圖片地址等等。
總的來(lái)說(shuō)，HTML5蝴蝶飛代碼是一種非常簡(jiǎn)單有趣的特效，可以在網(wǎng)頁(yè)中添加一些小清新的元素。