This just makes a spinning green X!
<!DOCTYPE html>
<html>
<head>
<title>Whatever</title>
</head>
<style>
#actor {
color: #00FF00;
}
#actor:before {
-webkit-animation-name: spin;
-webkit-animation-duration: 1250ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 1250ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 1250ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 1250ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
display:inline-block;
content: "X";
}
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-ms-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
#outside {
padding: 40px;
}
</style>
<body>
<div id="outside">
<div id="actor"></div>
</div>
</body>
</html>
No comments:
Post a Comment