2. PHPRunner General questions
  3. [SOLVED] Animated CSS backgrounds... for Login Screen
This topic is locked
[SOLVED]

Animated CSS backgrounds... for Login Screen

 		10/12/2021 12:07:30 PM
PHPRunner General questions
Dalkeith author

Dear All

I always like to have a nice professional background for the opening screen - I usually choose something pretty neutral.

I ve been experimenting with trying to get some animated backgrounds for login. eg like this

Animated CSS Backgrounds

Unfortunately I wasn't able to get those workings.

The only one I've managed to get working is a rather psychadelic change of colour.

body.function-login {
background: linear-gradient(132deg, #FC415A, #591BC5, #212335);
background-size: 400% 400%;
animation: Gradient 15s ease infinite;
position: relative;
height: 100vh;
width: 100%;
overflow: hidden;
padding:0;
margin:0px;
}
@keyframes Gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

Was wondering if we could share code of animations that users have managed to get working along with how we did it?
Dalkeith author 10/12/2021

Here's another site where there are lots of ideas although really not sure how to implement

Websites for Creative Backgrounds
Sergey Kornilov admin 10/13/2021

Definitely looks like something that Custom CSS can handle. I won't call it professional though. Animated and professional rarely do well together. Creative - yes, professional - not so much.

Dalkeith author 10/14/2021

Curious Sergey are you talking about the coding or just the result?

If you are talking about my psychadelic effort I absolutely agree looks really unprofessional.
Sergey Kornilov admin 10/14/2021

I'm just saying, as a personal opinion of course, that if you need to build something professionally looking, in 99% of cases animations need to be avoided. That is all.

This goes back as far as early 90s when people just discovered HTML and were overusing HTML tags like marquee or blink.