<!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 {
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>
</body>
</html>