在CSS的代码海洋里，寻觅那一抹诗意

2024-02-06 13:50:04

也许是秋风吹落的落叶敲打着窗棂，也许是窗外雨滴汇成小溪诉说离愁，我最近的心绪总是起伏不定，思绪万千。一个个灵光乍现的瞬间，我都用HTML和CSS记录在自己的CodePen（https://codepen.io/krischan77）上。时至今日，这些代码片段已汇集成一本独属于我的诗集，记录着我心中那份无法言说的情感。

在众多代码片段中，有三则让我印象尤为深刻，仿佛在CSS的代码海洋里，我寻觅到了那一抹诗意。

一叶知秋

.leaf {
 width: 100px;
 height: 100px;
 background-color: #FFD700;
 -webkit-animation: fall 1s infinite alternate;
 animation: fall 1s infinite alternate;
}

@-webkit-keyframes fall {
 from {
   transform: translate(0, 0);
 }
 to {
   transform: translate(0, 100px);
 }
}

@keyframes fall {
 from {
   transform: translate(0, 0);
 }
 to {
   transform: translate(0, 100px);
 }
}

这片金黄的落叶，在风中摇曳，缓缓飘落，仿佛带走了我对过往的怀念。

芭蕉夜雨

.banana-tree {
  width: 200px;
  height: 300px;
  background-color: #00FF00;
}

.banana-leaf {
  width: 100px;
  height: 50px;
  background-color: #008000;
  -webkit-animation: swing 1s infinite alternate;
  animation: swing 1s infinite alternate;
}

@-webkit-keyframes swing {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(10deg);
  }
}

@keyframes swing {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(10deg);
  }
}

.rain-drop {
  width: 10px;
  height: 10px;
  background-color: #0000FF;
  -webkit-animation: drop 1s infinite alternate;
  animation: drop 1s infinite alternate;
}

@-webkit-keyframes drop {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(0, 100px);
  }
}

@keyframes drop {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(0, 100px);
  }
}

雨滴落在芭蕉叶上，发出滴答滴答的声响，诉说着我对离人的思念。

三更梦回

.bed {
  width: 200px;
  height: 150px;
  background-color: #808080;
}

.pillow {
  width: 100px;
  height: 50px;
  background-color: #FFFFFF;
}

.person {
  width: 50px;
  height: 50px;
  background-color: #FF0000;
  -webkit-animation: sleep 1s infinite alternate;
  animation: sleep 1s infinite alternate;
}

@-webkit-keyframes sleep {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(0, 10px);
  }
}

@keyframes sleep {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(0, 10px);
  }
}