哪种语言的CSS会减少我使用的代码量？

Question

哪种语言可以简化此代码，因此我可以轻松地添加更多的叶子，而不必一遍又一遍地复制粘贴所有代码。我尝试了少一些的编译器，但都没有用！我知道这可能非常简单，但我认为我只需要另一个想法就可以摆脱想法，因为我很沮丧！我希望从旋转的J中射出近100片叶子，并希望每片叶子都有不同的路径和时间，好像风从徽标中吹出来一样！

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>

Answer 1

CSS类中有很多冗余，可以更好地封装。您只需为具有相同属性的叶子使用一个基类，然后在其他类或id中添加颜色和延迟之类的信息即可（如我在下面所做的那样）。

这样，通过为所有叶子都设置一个通用类，您可以省略重复的.mylogo .div。

为了获得更好的可读性，我可以自由地将您的某些类重命名为leaf，请随时重新命名。

这会导致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>

Answer 2

您的大多数样式都在所有.my-logoN div之间共享，因此您可以使用公共类对所有样式进行样式设置。然后可以使用一个单独的类来覆盖默认值。

现在您在每个div上都使用一个通用类，因此您不再需要复制.my-logoN div样式。

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>