HTML5抖動效果代碼
使用HTML5的抖動效果可以使網頁更加動態和有趣。在此，我們將介紹一些簡單的HTML5抖動效果代碼。
首先，我們需要在HTML文件中添加以下代碼來創建一個DIV元素以呈現抖動效果。
<div id="shake_me"> <p>請使我抖動！</p> </div>然后，我們需要添加以下CSS代碼來定義抖動效果的樣式。
#shake_me{
position:relative;
animation:shake 0.5s linear;
transform-origin:center center;
animation-iteration-count:infinite;
}
@keyframes shake{
0%{transform:translate(0,0);}
5%{transform:translate(-10px,0);}
10%{transform:translate(10px,0);}
15%{transform:translate(-10px,0);}
20%{transform:translate(10px,0);}
25%{transform:translate(-10px,0);}
30%{transform:translate(10px,0);}
35%{transform:translate(-10px,0);}
40%{transform:translate(10px,0);}
45%{transform:translate(-10px,0);}
50%{transform:translate(10px,0);}
55%{transform:translate(-10px,0);}
60%{transform:translate(10px,0);}
65%{transform:translate(-10px,0);}
70%{transform:translate(10px,0);}
75%{transform:translate(-10px,0);}
80%{transform:translate(10px,0);}
85%{transform:translate(-10px,0);}
90%{transform:translate(10px,0);}
95%{transform:translate(-10px,0);}
100%{transform:translate(0,0);}
}最后，我們只需在HTML文件中引用CSS文件即可應用抖動效果。<head> <link rel="stylesheet" type="text/css" href="shake.css"> </head>現在，我們的DIV元素將以0.5秒的線性動畫持續不斷地抖動，使網頁更加動態和有趣。 總結 HTML5抖動效果代碼是一種簡單而有趣的方法，可以增加網頁的動態性和趣味性。通過使用CSS定義樣式和在HTML中應用抖動效果，我們可以創建一個有趣的和動態的網頁。
上一篇HTML5拍拍網題目代碼
下一篇HTML5拋硬幣代碼