直接用我的一段代碼演示下css3中實現動畫效果的事例,讓一個div自動旋轉起來
代碼如下:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> .ellipsis{ width:200px; height:200px; line-height:200px; border:1px solid red; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; animation: 5.5s linear 0s normal none infinite rotate; } @-webkit-keyframes rotate{ from{-webkit-transform:rotate(0deg)} to{-webkit-transform:rotate(360deg)} } @-moz-keyframes rotate{ from{-moz-transform:rotate(0deg)} to{-moz-transform:rotate(360deg)} } @-ms-keyframes rotate{ from{-ms-transform:rotate(0deg)} to{-ms-transform:rotate(360deg)} } @-o-keyframes rotate{ from{-o-transform:rotate(0deg)} to{-o-transform:rotate(360deg)} } </style> </head> <body> <div class="ellipsis">ellipsisellipsisellipsisellipsisellipsisellipsisellipsis</div> </body> </html>