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