What language css would reduce the amount of code I use?

Question

What language would make this code simplified so i can easily add more leaves without having to copy paste all the code over and over again. I tried a few less compilers and none of them have worked! I know this is probably super simple but I think I just need another mind to bounce ideas off of because I am stumped! I want almost 100's of leaves to be shot out of the spinning J and want each leaf to have a different path and timing as if the wind is blowing it from the logo!

body html{
  overflow: none;
}

.logo{
  width: 100vw;
}

.j{
    display: block;
    margin: 0 auto;
    height: 100px;
    width: auto;
    animation: spin 6s linear infinite;
}

@keyframes spin{
  0%{
    
    transform: rotateY(2880deg);
  }
  80%{
    transform: rotateY(360deg);
}

  
}
.fa{
  transform: scale(.5);
}

@keyframes leafanimation {
         0% {
           transform:translate(0,0) rotate(1440deg);      
         }
  
        10% {
          transform:translate(0,0) rotate(1440deg); 
        }
  
        40% {
          transform:translate(0px,100px) rotate(1080deg); }
  
        60% {
          transform:translate(-250px,200px) rotate(720deg); }
  
        80% {
            transform:translate(-450px,450px) rotate(360deg); }
  
       100% {
         transform:translate(-900px,500px) rotate(0deg);
         
  }
}

.my-logo {
position:absolute; 
top:0;
left:50%;
height: 40px;
width: 200px;
line-height: 40px;
font-size: 36px;
color: red;
animation: leafanimation 6s linear infinite;
}

.my-logo div {
display: inline-block;
width: 20px;
height: 40px;
vertical-align: middle;
border-radius: 20px;
}

.my-logo1 {
position:absolute; 
top:0;
left:50%;
height: 40px;
width: 50px;
line-height: 40px;
font-size: 36px;
color: green;
animation: leafanimation 6s linear infinite;
  animation-delay: .5s;
}

.my-logo1 div {
display: inline-block;
width: 20px;
height: 40px;
vertical-align: middle;
border-radius: 20px;
}

.my-logo2 {
position:absolute; 
top:0;
left:50%;
height: 40px;
width: 150px;
line-height: 40px;
font-size: 36px;
color: blue;
animation: leafanimation 6s linear infinite;
  animation-delay: .7s;
}

.my-logo2 div {
display: inline-block;
width: 20px;
height: 40px;
vertical-align: middle;
border-radius: 20px;
}

.my-logo3 {
position:absolute; 
top:0;
left:50%;
height: 40px;
width: 150px;
line-height: 40px;
font-size: 36px;
color: pink;
animation: leafanimation 6s linear infinite;
  animation-delay: .2s;
}

.my-logo3 div {
display: inline-block;
width: 20px;
height: 40px;
vertical-align: middle;
border-radius: 20px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="logo"><img class="j" src="https://www.freeiconspng.com/uploads/letter-j-icon-png-24.png"</img></div>
<div class="my-logo">
<div><i class="fa fa-leaf" aria-hidden="true"></i></div>
</div>

<div class="my-logo1">
<div><i class="fa fa-leaf" aria-hidden="true"></i></div>
</div>

<div class="my-logo2">
<div><i class="fa fa-leaf" aria-hidden="true"></i></div>
</div>

<div class="my-logo3">
<div><i class="fa fa-leaf" aria-hidden="true"></i></div>
</div>

nylki · Accepted Answer · 2018-07-23 16:53:11Z

You have a lot of redundancies in your CSS classes, that can be capsulated better. You can simply use one base class for your leaves with the common properties and add info like the color and delay in a different class or id (as I have done below).

That way, by having a common class for all your leaves, you can omit the dublicate .mylogo .div.

I took the freedom to rename some of your classes to leaf for better readability on my side, feel free to rename again.

This results in much shorter CSS:

body html {
  overflow: none;
}

.logo {
  width: 100vw;
}

.j {
  display: block;
  margin: 0 auto;
  height: 100px;
  width: auto;
  animation: spin 6s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotateY(2880deg);
  }
  80% {
    transform: rotateY(360deg);
  }
}

.fa {
  transform: scale(.5);
}

@keyframes leafanimation {
  0% {
    transform: translate(0, 0) rotate(1440deg);
  }
  10% {
    transform: translate(0, 0) rotate(1440deg);
  }
  40% {
    transform: translate(0px, 100px) rotate(1080deg);
  }
  60% {
    transform: translate(-250px, 200px) rotate(720deg);
  }
  80% {
    transform: translate(-450px, 450px) rotate(360deg);
  }
  100% {
    transform: translate(-900px, 500px) rotate(0deg);
  }
}

.leaf {
  position: absolute;
  top: 0;
  left: 50%;
  height: 40px;
  line-height: 40px;
  font-size: 36px;
  animation: leafanimation 6s linear infinite;
}

.leaf div {
  display: inline-block;
  width: 20px;
  height: 40px;
  vertical-align: middle;
  border-radius: 20px;
}

#leaf-1 {
  width: 200px;
  color: red;
}

#leaf-2 {
  width: 50px;
  color: green;
  animation-delay: .5s;
}

#leaf-3 {
  width: 150px;
  color: blue;
  animation-delay: .7s;
}

#leaf-4 {
  width: 150px;
  color: pink;
  animation-delay: .2s;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="logo"><img class="j" src="https://www.freeiconspng.com/uploads/letter-j-icon-png-24.png" </img></div>
<div class="leaf" id="leaf-1">
  <div><i class="fa fa-leaf" aria-hidden="true"></i></div>
</div>

<div class="leaf" id="leaf-2">
  <div><i class="fa fa-leaf" aria-hidden="true"></i></div>
</div>

<div class="leaf" id="leaf-3">
  <div><i class="fa fa-leaf" aria-hidden="true"></i></div>
</div>

<div class="leaf" id="leaf-4">
  <div><i class="fa fa-leaf" aria-hidden="true"></i></div>
</div>

Turnip · Accepted Answer · 2018-07-23 16:32:49Z

Most of your styles are shared between all of the .my-logoN divs so you can use a common class to style them all. A separate class can then be used to override the defaults.

Now that you are using a common class on each of the divs, you no longer need to duplicate the .my-logoN div styles.

body html {
  overflow: none;
}

.logo {
  width: 100vw;
}

.j {
  display: block;
  margin: 0 auto;
  height: 100px;
  width: auto;
  animation: spin 6s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotateY(2880deg);
  }
  80% {
    transform: rotateY(360deg);
  }
}

.fa {
  transform: scale(.5);
}

@keyframes leafanimation {
  0% {
    transform: translate(0, 0) rotate(1440deg);
  }
  10% {
    transform: translate(0, 0) rotate(1440deg);
  }
  40% {
    transform: translate(0px, 100px) rotate(1080deg);
  }
  60% {
    transform: translate(-250px, 200px) rotate(720deg);
  }
  80% {
    transform: translate(-450px, 450px) rotate(360deg);
  }
  100% {
    transform: translate(-900px, 500px) rotate(0deg);
  }
}

.my-logo {
  position: absolute;
  top: 0;
  left: 50%;
  height: 40px;
  width: 200px;
  line-height: 40px;
  font-size: 36px;
  color: red;
  animation: leafanimation 6s linear infinite;
}

.my-logo div {
  display: inline-block;
  width: 20px;
  height: 40px;
  vertical-align: middle;
  border-radius: 20px;
}

.my-logo1 {
  width: 50px;
  color: green;
  animation-delay: .5s;
}

.my-logo2 {
  width: 150px;
  color: blue;
  animation-delay: .7s;
}

.my-logo3 {
  width: 150px;
  color: pink;
  animation-delay: .2s;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="logo"><img class="j" src="https://www.freeiconspng.com/uploads/letter-j-icon-png-24.png" </img></div>

<div class="my-logo">
  <div><i class="fa fa-leaf" aria-hidden="true"></i></div>
</div>

<div class="my-logo my-logo1">
  <div><i class="fa fa-leaf" aria-hidden="true"></i></div>
</div>

<div class="my-logo my-logo2">
  <div><i class="fa fa-leaf" aria-hidden="true"></i></div>
</div>

<div class="my-logo my-logo3">
  <div><i class="fa fa-leaf" aria-hidden="true"></i></div>
</div>

Collectives™ on Stack Overflow

What language css would reduce the amount of code I use?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related