Build a SVG Image Rotating Animation in Browser Using HTML5 and CSS3 Full Project For Beginners

Build a SVG Image Rotating Animation in Browser Using HTML5 and CSS3 Full Project For Beginners

 

Welcome folks today in this blog post we will be building a svg image rotating animation in browser using html5 and css3.All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 300">
  <rect class="mouse" x="0" y="0" width="800" height="300"/>
  <polygon class="turn-01 darkestTulip" points="400, 280, 310, 150, 400, 20, 490, 150"/>
  <polygon class="turn-02 darkTulip" points="400, 280, 310, 150, 400, 20, 490, 150"/>
  <polygon class="turn-03 tulip" points="400, 280, 310, 150, 400, 20, 490, 150"/>
  <polygon class="turn-04 paleTulip" points="400, 280, 310, 150, 400, 20, 490, 150"/>
  <polygon class="turn-05 palestTulip" points="400, 280, 310, 150, 400, 20, 490, 150"/>
</svg>

 

 

And now make a style.css file and copy paste the following code

 

 

style.css

 

 

.palestTulip {
     fill: #f2aabd;
}
 .paleTulip {
     fill: #f27990;
}
 .tulip {
     fill: #cc2954;
}
 .darkTulip {
     fill: #a51138;
}
 .darkestTulip {
     fill: #7c0826;
}
 .mouse {
     fill: #e5e4e3;
}
 .turn-01, .turn-02, .turn-03, .turn-04, .turn-05, .turn-06 {
     animation-duration: 8s;
     animation-iteration-count: infinite;
     animation-timing-function: ease-in-out;
     transform-origin: 50% 50%;
}
 .turn-01 {
     animation-name: turnOne;
}
 .turn-02 {
     animation-name: turnTwo;
}
 .turn-03 {
     animation-name: turnThree;
}
 .turn-04 {
     animation-name: turnFour;
}
 .turn-05 {
     animation-name: turnFive;
}
 @keyframes turnOne {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(180deg);
    }
}
 @keyframes turnTwo {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 @keyframes turnThree {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(540deg);
    }
}
 @keyframes turnFour {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(720deg);
    }
}
 @keyframes turnFive {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(900deg);
    }
}

 

See also  How to Format Numbers as Currency String of Different Countries in Javascript Full Tutorial For Beginners

 

Now if you open index.html file inside the browser you will see the below screenshot

 

 

Leave a Reply