<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
html {
background: black;
}
div {
-webkit-animation: spinny 60s ease-in-out infinite;
animation: spinny 60s ease-in-out infinite;
border-radius:0%;
width: 60vmin;
height: 60vmin;
-webkit-transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin));
transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin));
background: -webkit-radial-gradient(center top, circle, #00ffff, rgba(0, 0, 0, 0)),
-webkit-radial-gradient(bottom left, circle, #ffff00, rgba(0, 0, 0, 0)),
-webkit-radial-gradient(bottom right, circle, #ff00ff, rgba(0, 0, 0, 0));
background: url(images/logo.png) no-repeat center;
}
@-webkit-keyframes spinny {
from {
-webkit-transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(0);
transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(0);
}
to {
-webkit-transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(30turn);/*----旋轉圈數------*/
transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(30turn);
}
}
@keyframes spinny {
from {
-webkit-transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(0);
transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(0);
}
to {
-webkit-transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(30turn);/*----旋轉圈數------*/
transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(30turn);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
html {
background: black;
}
div {
-webkit-animation: spinny 60s ease-in-out infinite;
animation: spinny 60s ease-in-out infinite;
border-radius:0%;
width: 60vmin;
height: 60vmin;
-webkit-transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin));
transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin));
background: -webkit-radial-gradient(center top, circle, #00ffff, rgba(0, 0, 0, 0)),
-webkit-radial-gradient(bottom left, circle, #ffff00, rgba(0, 0, 0, 0)),
-webkit-radial-gradient(bottom right, circle, #ff00ff, rgba(0, 0, 0, 0));
background: url(images/logo.png) no-repeat center;
}
@-webkit-keyframes spinny {
from {
-webkit-transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(0);
transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(0);
}
to {
-webkit-transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(30turn);/*----旋轉圈數------*/
transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(30turn);
}
}
@keyframes spinny {
from {
-webkit-transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(0);
transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(0);
}
to {
-webkit-transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(30turn);/*----旋轉圈數------*/
transform: translate(calc(50vw - 33.33vmin), calc(50vh - 33.33vmin)) rotate(30turn);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
