css3.0实现背景旋转的方法

来源：互联网发布：编程算法是什么编辑：程序博客网时间：2024/06/02 09:37

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<style type="text/css">
/*css3.0 的从from 到to的改变 */
@-webkit-keyframes spin {
from { -webkit-transform: rotate(-55deg) }
to { -webkit-transform: rotate(305deg) }
}
@-moz-keyframes spin{
from { -moz-transform: rotate(-55deg) }
to { -moz-transform: rotate(305deg) }
}
@-ms-keyframes spin {
from { -ms-transform: rotate(-55deg) }
to { -ms-transform: rotate(305deg) }
}
/* t1 初始形态 */
#t1{
width:66px;
height:66px;
background-image:url(http://img.blog.csdn.net/20130618151427656);
display: block;
position: absolute;
-moz-transform: rotate(-55deg);
-webkit-transform: rotate(-55deg);
-ms-transform: rotate(-55deg);
/* webkit chrome, safari, mobile */
-webkit-animation-name: spin;
-webkit-animation-duration: 5000ms; /* 40 seconds */
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
/* ff */
-moz-animation-name: spin;
-moz-animation-duration: 5000ms; /* 40 seconds */
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
/* ie */
-ms-animation-name: spin;
-ms-animation-duration: 5000ms; /* 40 seconds */
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}

</style>
</head>

<body>
<div id="t1"></div>
<p>css的动画基本上可以说是已经可以独当一面了，呵呵。学习学习</p>
</body>
</html>