Animated Background in CSS

Asked

Viewed 1,123 times

0

I’ve been researching in CSS how to put an animated background. In codepen what I thought didn’t work, I’d like to do something like this : https://codepen.io/vaibhavarora/pen/xmpxjp or this: https://discordapp.com/login

But in the background, leave a background image of my choice instead of blue, someone has some tutorial or something basic in com css so I can start working this?

javascript css

  • Cara edits your question and puts what you already have of code there. Another thing, I don’t quite understand what you want, has an image of the layout you want? You that shape over an image in the background? Place your HTML and CSS that you have so far

  • Actually, it’s not "animated background". It’s an animated object like any other. Then you just position it wherever you want. Whether it’s background or not. Plus @hugocsl has already described what you need to do...

  • I didn’t do anything because I don’t know where to start

  • 1

    @Lipespry actually can be an "animated background" yes! After a look at the answer I left

  • @hugocsl I told you I don’t underestimate you, right?! Kkkk

  • 1

    @Lipespry Stackoverflow is where you can do everything you don’t have a chance to do on other rss projects... But soon you can exercise a lot around here!

  • 1

    @hugocsl I confess that it has been more didactic to solve the problems here than many courses and tutorials I see around! Kkkkk

Show 2 more comments

2 answers

2


Follow a direct option on body using only the background, nor need tags html :D

All with CSS:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-image: 
        radial-gradient(circle at left bottom, 
        #ffff 0%, #ffff 20%, 
        #fffb 20%, #fffb 30%, 
        #fff6 30%, #fff6 40%, 
        #fff2 40%, #fff2 50%, 
        transparent 50%, transparent 100%),
        url(https://placecage.com/100/100);
    background-size: 100% 100%, cover;
    background-position: bottom left, center;
    background-repeat: no-repeat;

    animation: nome 5s infinite;
}
@keyframes nome {
    50% {
        background-size: 120% 120%, cover;
    }
}

  • Ugo, how do I reduce the radius of the circles a little? Ta almost in the middle of the screen :)

  • @Ricardogonçalves puts here background-size: 60% 60%, cover; and within @keyframes you put background-size: 100% 100%, cover; This will solve, unless the screen is too wide... then you will have to work on the values within the radial-gradient, which is a bit more boring to switch to for those who do not have much familiarity...

  • the last Hugo, how can I make these circles a little transparent? will be perfect with my idea :)

  • @Ricardogonçalves ta seeing that I am using in the radial-gradient a hexadecimal color that has 4 digits? Like #fffb or #fff6, this last character controls the opacity is only changing this last character that is more or less transparent. You can read more here https://answall.com/questions/345285/css-opacidade-da-cor-hexadecimal/345312#345312 ... The other option is to change the color hexa #fffa for colors in rgba(), ai vc takes the #fffb and puts rgba(255,255,255,0.2), this 0.2 at the end controls the color transparence, 1 is fully visible, and 0 is transparent, ai goes 0.1, 0.5, up to 1

0

Using that codepen snippet that you provided in the question, just change the property background tag <body> to include an image, instead of the blue color that is now.

body {
  background: url('http://lorempixel.com/200/200/abstract')/* única alteração. */
}

.circle {
  position: absolute;
  border-radius: 50%;
  background: white;
  animation: ripple 15s infinite;
  box-shadow: 0px 0px 1px 0px #508fb9;
}

.small {
  width: 200px;
  height: 200px;
  left: -100px;
  bottom: -100px;
}

.medium {
  width: 400px;
  height: 400px;
  left: -200px;
  bottom: -200px;
}

.large {
  width: 600px;
  height: 600px;
  left: -300px;
  bottom: -300px;
}

.xlarge {
  width: 800px;
  height: 800px;
  left: -400px;
  bottom: -400px;
}

.xxlarge {
  width: 1000px;
  height: 1000px;
  left: -500px;
  bottom: -500px;
}

.shade1 {
  opacity: 0.2;
}

.shade2 {
  opacity: 0.5;
}

.shade3 {
  opacity: 0.7;
}

.shade4 {
  opacity: 0.8;
}

.shade5 {
  opacity: 0.9;
}

@keyframes ripple {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(0.8);
  }
}
<div class='ripple-background'>
  <div class='circle xxlarge shade1'></div>
  <div class='circle xlarge shade2'></div>
  <div class='circle large shade3'></div>
  <div class='circle mediun shade4'></div>
  <div class='circle small shade5'></div>
</div>

Browser other questions tagged javascript css

You are not signed in. Login or sign up in order to post.