Thursday, February 12, 2015

HTML5 CSS3 Star | HTML 5 & CSS 3 - Create a Pentagram

CSS3 Pentagram (Five-Pointed Star) Code
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>



Create a Successful Online Store at Bigcommerce! Try it Free Now!

No comments:

Post a Comment