查看效果：http://hovertree.com/texiao/css/17/
代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>旋轉的球體 - 何問起</title>
<style type="text/css">
/* 動畫定義 */
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 旋轉，漸變色 */
#advanced {
width: 200px;
height: 200px;
background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
animation: spin 2s cubic-bezier(0.9,1,0.2,1) infinite;
-webkit-animation: spin 2s cubic-bezier(0.9,1,0.2,1) infinite;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="advanced"></div>
<a href="http://hovertree.com/">何問起</a>
</body>
</html>http://hovertree.com/texiao/css/17/