直接用我的一段代码演示下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>