Website Programming: Circle Gradient Animation Pure HTML & CSS
Now we're going to make motion graphics that serve a purpose and with style. With this animation (circle gradient) I think many people would like it since the animation is simple, only with black background and views of the gradient-color just like magic appear and plays all the time whenever you bored, an animation is an incredible tool in a website. On the website, we can make anything animation, creative display, or maybe a game? But to go to that level we have to learn from the basics.
HTML
In this lesson, we don't need full responsive coding circle like <meta name="viewport" content="width=device-width, initial-scale=1.0"> instead we only need <meta charset = "utf-8"> as responsive coding circle in the HTML, it's because the HTML itself is too basic and we only put an element <div class = "loader"> </div> simple. But to get circle gradient we have to do the complex level coding in the css, but it's worth it
If you read my other article
WEBSITE PROGRAMMING: GLOWING BORDER IN RESPONSIVE WAY
They just display the color but not a moving color, so I can said that this lesson is the next level of gradient color.
WEBSITE PROGRAMMING: HOVER ANIMATION IN RESPONSIVE WAY
CSS ( style.css )
This is the order for the animation. Through that codes said that I'm going to make the "loader" spin with filter hue-rotate(color) from 0 deg in 0% process to 360 deg in 100% process. So the color will changed by this filter: hue-rotate from 0 to 360 deg.
This is the end of codes, let me explain what is this .loader::before and after, they're the process but in a different statement, if @keyframes is for the rotate, then .loader::before and after are for the additional effect. Let's take from background: linear-gradient(45deg, transparent, transparent 40%, ....) it says that we're going to make 45% of the circle = gone and other additional like margin(include top, left, right, and bottom), border-radius, index, and filter.
That's all for the lesson, this is the next level of CSS
WEBSITE PROGRAMMING: GLOWING BORDER IN RESPONSIVE WAY
Comments
Post a Comment