html - 什么语言的 css 会减少我使用的代码量？

Question

哪种语言可以简化此代码，这样我就可以轻松添加更多叶子，而无需一遍又一遍地复制粘贴所有代码。我尝试了几个较少的编译器，但没有一个有效!我知道这可能非常简单，但我认为我只是需要另一个想法来重新思考，因为我被难住了!我想要将近 100 片树叶从旋转的 J 中射出，并希望每片树叶都有不同的路径和时间，就好像风是从 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>

Answer 1

您的 CSS 类中有很多冗余，可以更好地封装。您可以简单地为具有公共(public)属性的叶子使用一个基类，并在不同的类或 ID 中添加颜色和延迟等信息(正如我在下面所做的那样)。

这样，通过为所有叶子创建一个公共(public)类，您可以省略重复的 .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>