Website Programming: Circle Gradient Animation Pure HTML & CSS

    

  Bandung, Indonesia, October 6, 2020 15:32PM - Animation is a method to manipulated images to appear as moving images. So movement animation is a process of animations which are generated on a computer, in this lesson we're going to make moving animation through coding pure coding. Basically animation in website is used to all kinds of pages on the internet, the animation can be a small, medium, or big, depends on the requirement of the website. Sometimes animation can be used to promote a product or services.

    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

HTML is the basis of a website, if you want to make a website you have to use HTML. HTML is just the construction and CSS is the decoration.

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 )

CSS is essential because we're going to play with effect, display, animation. So, let's get started.

So. this is the basic we have to type. Adjust the body, and the label(loader) in the body with the display, color, height, width, padding, box-sizing( one of the responsive coding circle), and animation (the animation doesn't mean I will work without more specific coding, it's just labeling the "animate" just tell the computer that I'm going to make an animation named animate in 2 second with linear infinite.

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: HOVER ANIMATION IN RESPONSIVE WAY

WEBSITE PROGRAMMING: GLOWING BORDER IN RESPONSIVE WAY

Just giving gradient color animation, adjust text size, padding, margin, spacing, making a variable, etc. Through this lesson, we can do many things in similar ways, like giving a button a glowing border, make a glowing checkbox, etc. Be creative, when you have an idea just do it upgrade your skill, and be a professional.

Thank you for reading my blog and see you in the next article