css glow effect with CSS [closed]

Question

css glow effect with CSS [closed]

Navigation

#1 by (3 votes)

1

On this site link there is a very interesting glow effect; I do not know if it will be done with CSS Can anyone give me some tips on how to do that? Thankful

html5 css3

asked by anonymous 23.07.2018 / 01:55

1 answer

Date range How to use pointers in delphi?

score 3 · Answer 1

The effect of sei is probably scripted, I did not find any references in the CSS to approximate the effect that is on the screen. I believe it was done with canvas .

For those who could not see this is the image taken from the sample site.

WithCSSusinglinear-gradiente,andfilter:blurand@keyframesyougetsomethingveryclose.

html, 
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 100%), url(http://unsplash.it/300/180);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
        .glow {
      position: relative;
      width: 200px;
      height: 205px;
      background-image: linear-gradient(rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 100%), url(http://unsplash.it/300/180);
      background-attachment: fixed;
      background-size: 100%;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 50%;
    }
    .glow::after, 
    .glow::before {
      content: "";
      position: absolute;
      background-image: linear-gradient(45deg, red, orangered, yellow, green, blue, purple, magenta);
      background-size: 400%;
      top: -2px;
      left: -2px;
      width: calc(100% + 4px);
      height: calc(100% + 4px);
      border-radius: 50%;
      z-index: -1;
      animation: anima 20s infinite linear, gira 20s infinite linear;
    }
    .glow::after {
      filter: blur(20px);
      border-radius: 50% 50% 50% 50%;
      opacity: .8;
    }
    @keyframes anima {
      0% {
        background-position: 0 0;
      }
      50% {
        background-position: 400% 0;
      }
      100% {
        background-position: 0 0;
      }
    }
    @keyframes gira {
      0% {
        transform: rotate(0deg) scale(1);
      }
      50% {
        transform: rotate(360deg) scale(.975);
        border-radius: 47% 53% 50% 55%;
      }
      100% {
        transform: rotate(0deg) scale(1);
      }
    }
    .wrapper {
      position: relative;
      z-index: 100;
    }

<div class="wrapper">    
    <div class="glow"></div>    
</div>