The code below creates a yellow star
<style>
/* Chrome, Safari, Opera */
@-webkit-keyframes pentagram_animation {
0% {-webkit-transform: rotate(0deg);}
25% {-webkit-transform: rotate(90deg);}
50% {-webkit-transform: rotate(180deg);}
75% {-webkit-transform: rotate(270deg);}
100% {-webkit-transform: rotate(360deg);}
}
/* Standard syntax */
@keyframes pentagram_animation {
0% {transform: rotate(0deg);
-ms-transform: rotate(0deg);}
25% {transform: rotate(90deg);
-ms-transform: rotate(90deg);}
50% {transform: rotate(180deg);
-ms-transform: rotate(180deg);}
75% {transform: rotate(270deg);
-ms-transform: rotate(270deg);}
100% {transform: rotate(360deg);
-ms-transform: rotate(360deg);}
}
.pentagram {
margin: 120px 0 0 0;
width: 200px;
height: 200px;
-ms-transform-origin: 55px 15px; /* IE 9 */
-webkit-transform-origin: 55px 15px; /* Chrome, Safari, Opera */
transform-origin: 55px 15px;
-webkit-animation: pentagram_animation 5s linear 1s infinite normal; /* Chrome, Safari, Opera */
animation: pentagram_animation 5s linear 1s infinite normal;
}
.pentagram_top {
width: 0;
height: 0;
border-top: 34px solid yellow;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
}
.pentagram_left {
width: 0;
top: -34px;
position: relative;
border-top: 34px solid yellow;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
transform: rotate(72deg);
-ms-transform: rotate(72deg);
-webkit-transform: rotate(72deg);
}
.pentagram_right {
width: 0;
top: -68px;
position: relative;
border-top: 34px solid yellow;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
transform: rotate(-73deg);
-ms-transform: rotate(-73deg);
-webkit-transform: rotate(-73deg);
}
</style>
<div class="pentagram">
<div class="pentagram_top"></div>
<div class="pentagram_left"></div>
<div class="pentagram_right"></div>
</div>
No comments:
Post a Comment