LogoWorx

LogoWorx

1. Create a new full height section and drop in an Icon Element.

  • Choose the icon “circle-thin”
  • Set it’s size to 600px
  • Give it two css classes “sphere one”
  • Set custom positioning to “absolute”
  • Set the horizontal left offset to -3px and vertical top offset to 150px
2. Paste custom css to set a gradient from orange to purple: 
1
2
3
4
5
selector .elementor-icon i:before {
    background: -webkit-gradient(linear, left top, left bottom, from(orange), to(purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

3. Copy the Icon Element. and paste a second version, slightly modifying it from the first.

  • Change it’s css classes from “one” to “two” keeping “the “sphere” class
  • Change it’s “Absolute” positioning to 3px horizontal and 147px vertical

4. Adjust the custom css colors from purple to teal:

1
2
3
4
5
selector .elementor-icon i:before {
    background: -webkit-gradient(linear, left top, left bottom, from(purple), to(teal));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

5. Copy the Icon Element again and paste a third version, slightly modifying it from the first two.

  • Change it’s css classes from “two” to “three” again keeping “the “sphere” class
  • Change it’s “Absolute” positioning to -3px horizontal and 147px vertical

6. Adjust the custom css colors again from teal to orange:

1
2
3
4
5
selector .elementor-icon i:before {
    background: -webkit-gradient(linear, left top, left bottom, from(teal), to(orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

7. Copy the Icon Element again and paste a fourth and final version, slightly modifying it from the first three.

  • Change it’s icon to the full circle
  • Change it’s css classes from “three” to “four” again keeping the “sphere” class
  • Change it’s “Absolute” positioning to 0px horizontal and 170px vertical

8. Adjust the custom css colors again from rgba(40,40,39,0.7) to rgba(40,40,39,1):

1
2
3
4
5
selector .elementor-icon i:before {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(40,40,39,0.7)), to(rgba(40,40,39,1)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

9. Now let’s create the first animation loop which will rotate the spheres.  I typically paste this in the containing section’s custom css area:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@-webkit-keyframes rotator /* Safari and Chrome */ {
  0% {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotator {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

10. In the same custom css area, let’s create our second animation loop which will fade-in and fade-out each sphere based on a timer we will set in the next step:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
@keyframes fader {
  0%   { opacity:0; z-index: 1; }
  50%  { opacity:1; z-index: 3; }
  100% { opacity:0; z-index: 1; }
}
@-o-keyframes fader {
  0%   { opacity:0; z-index: 1; }
  50%  { opacity:1; z-index: 3; }
  100% { opacity:0; z-index: 1; }
}
@-moz-keyframes fader {
  0%   { opacity:0; z-index: 1; }
  50%  { opacity:1; z-index: 3; }
  100% { opacity:0; z-index: 1; }
}
@-webkit-keyframes fader {
  0%   { opacity:0; z-index: 1; }
  50%  { opacity:1; z-index: 3; }
  100% { opacity:0; z-index: 1; }
}

11. Lastly, let’s give each of the sphere’s their own staggered animation delays so they each appear to equally fade in/out while rotating.  We do this by giving values divisible by 3 because we have 3 colored spheres.

For example, we’ll set our 360 degree rotator animation loop to 3 seconds total.  We’ll start the first sphere immediately, the second after 1 second and the 3rd after 2 seconds.  This way each will have a 1 second offset.

Next we ensure the fader animation loop is also divisible by 3 setting it’s loop timer to 6 seconds total.  Setting the first sphere’s delay to 0 seconds starting it immediately, the second sphere after 2 seconds and the 3rd after 4 seconds.  Again each having an equal offset of 2 seconds.

The fourth icon again just stays put and acts like a partial mask to give a nice effect when the other sphere’s rotate.

The final touch is adding a slight offset to the transform-origin property.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.sphere.one .elementor-icon i {
    opacity: 0;
    -webkit-animation: rotator 3s linear infinite 0s, fader 6s linear infinite 0s;
    -moz-animation: rotator 3s linear infinite 0s, fader 6s linear infinite 0s;
    -ms-animation: rotator 3s linear infinite 0s, fader 6s linear infinite 0s;
    -o-animation: rotator 3s linear infinite 0s, fader 6s linear infinite 0s;
    animation: rotator 3s linear infinite 0s, fader 6s linear infinite 0s;
    transform-origin: 50% 51%;
}
.sphere.two .elementor-icon i {
    opacity: 0;
    -webkit-animation: rotator 3s linear infinite 1s, fader 6s linear infinite 2s;
    -moz-animation: rotator 3s linear infinite 1s, fader 6s linear infinite 2s;
    -ms-animation: rotator 3s linear infinite 1s, fader 6s linear infinite 2s;
    -o-animation: rotator 3s linear infinite 1s, fader 6s linear infinite 2s;
    animation: rotator 3s linear infinite 1s, fader 6s linear infinite 2s;
    transform-origin: 50% 49%;
}
.sphere.three .elementor-icon i {
    opacity: 0;
    -webkit-animation: rotator 3s linear infinite 2s, fader 6s linear infinite 4s;
    -moz-animation: rotator 3s linear infinite 2s, fader 6s linear infinite 4s;
    -ms-animation: rotator 3s linear infinite 2s, fader 6s linear infinite 4s;
    -o-animation: rotator 3s linear infinite 2s, fader 6s linear infinite 4s;
    animation: rotator 3s linear infinite 2s, fader 6s linear infinite 4s;
    transform-origin: 49% 50%;
}

12. Create an H2 Heading Element , I chose the Roboto font wrapping the “Logo” part in <span> </span> tags.

  • set Color to white
  • Font size is 150px
  • Font weight 100
  • add some top margin i.e. 100px
6. Add custom css to set the font-weight for the first part of the logo to give it some contrast: 
1
2
3
selector h2 span {
    font-weight: 600;
}

LogoWorx

FIN.

LogoWorx is a free Elementor template.

Do you like it?

Download Now