我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！

我的想法

都说程序员是死宅男，天生缺少浪漫细菌。这不是明摆着对程序员的黑化吗？（虽然我真的是这样）。而且最近我看到一条新闻，说程序员在人群中很明显“黑眼镜，格子衫，双肩包，说话没有头发多” 。。。。说实话很多行业对我们程序员有太多的不了解导致一直被黑化。虽然说除了发量描述的跟我还挺像（可恶）。所以今天我出一个和浪漫有关的话题特效，希望大家用的到。

展示

相关技术

首先页面部分设置div容器，和文字。

<div class="balloon"></div>
<div class="center">
 <h5>				
		我爱你就像<br><br><br>

               风走了千万里不问归期<br><br><br>
	像太阳升了落去无论朝夕<br><br><br>
          	就像云飘了千万里都不曾歇息<br><br><br>
	像白雪肆虐大地茫茫无期</h5></br> <h6>2022.++.++</h6>
</div>

然后就是样式的设置了

一个粉色调的背景

body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: -webkit-linear-gradient(white, #e0d1d1);
  background: linear-gradient(white, #e0d1d1);
  box-shadow: inset 0 5vh 30vh 5vh #d6c2c2;
  font-family: "Share Tech Mono", monospace;
  color: white;
  font-size: 2rem;
}

设置气球样式

.balloon {
  top: 100vh;
  opacity: 0.95;
  position: absolute;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  width: 10rem;
  height: 10rem;
  background: #faf9f9;
  border-radius: 10rem 10rem 4rem 10rem;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  box-shadow: inset -0.5rem -0.5rem 5rem -0.5rem #c99c9c, 3rem 3rem 1.5rem rgba(153, 102, 102, 0.2);
  -webkit-animation: float1 10s infinite ease-out;
          animation: float1 10s infinite ease-out;
}

设置浮动

-webkit-keyframes float1 {
  0% {
    -webkit-transform: rotate(40deg) translateY(0) translateX(0);
            transform: rotate(40deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: rotate(50deg) translateY(-85vh) translateX(-85vh);
            transform: rotate(50deg) translateY(-85vh) translateX(-85vh);
  }
}
@keyframes float1 {
  0% {
    -webkit-transform: rotate(40deg) translateY(0) translateX(0);
            transform: rotate(40deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: rotate(50deg) translateY(-85vh) translateX(-85vh);
            transform: rotate(50deg) translateY(-85vh) translateX(-85vh);
  }
}
@-webkit-keyframes float2 {
  0% {
    -webkit-transform: rotate(55deg) translateY(0) translateX(0);
            transform: rotate(55deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: rotate(45deg) translateY(-85vh) translateX(-85vh);
            transform: rotate(45deg) translateY(-85vh) translateX(-85vh);
  }
}
@keyframes float2 {
  0% {
    -webkit-transform: rotate(55deg) translateY(0) translateX(0);
            transform: rotate(55deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: rotate(45deg) translateY(-85vh) translateX(-85vh);
            transform: rotate(45deg) translateY(-85vh) translateX(-85vh);
  }
}
@-webkit-keyframes float3 {
  0% {
    -webkit-transform: rotate(45deg) translateY(0) translateX(0);
            transform: rotate(45deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: rotate(35deg) translateY(-85vh) translateX(-85vh);
            transform: rotate(35deg) translateY(-85vh) translateX(-85vh);
  }
}
@keyframes float3 {
  0% {
    -webkit-transform: rotate(45deg) translateY(0) translateX(0);
            transform: rotate(45deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: rotate(35deg) translateY(-85vh) translateX(-85vh);
            transform: rotate(35deg) translateY(-85vh) translateX(-85vh);
  }
}
@-webkit-keyframes floatfront1 {
  0% {
    -webkit-transform: scale(1.3) rotate(40deg) translateY(0) translateX(0);
            transform: scale(1.3) rotate(40deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: scale(1.3) rotate(50deg) translateY(-100vh) translateX(-100vh);
            transform: scale(1.3) rotate(50deg) translateY(-100vh) translateX(-100vh);
  }
}
@keyframes floatfront1 {
  0% {
    -webkit-transform: scale(1.3) rotate(40deg) translateY(0) translateX(0);
            transform: scale(1.3) rotate(40deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: scale(1.3) rotate(50deg) translateY(-100vh) translateX(-100vh);
            transform: scale(1.3) rotate(50deg) translateY(-100vh) translateX(-100vh);
  }
}
@-webkit-keyframes floatfront2 {
  0% {
    -webkit-transform: scale(1.3) rotate(55deg) translateY(0) translateX(0);
            transform: scale(1.3) rotate(55deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: scale(1.3) rotate(45deg) translateY(-100vh) translateX(-85vh);
            transform: scale(1.3) rotate(45deg) translateY(-100vh) translateX(-85vh);
  }
}
@keyframes floatfront2 {
  0% {
    -webkit-transform: scale(1.3) rotate(55deg) translateY(0) translateX(0);
            transform: scale(1.3) rotate(55deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: scale(1.3) rotate(45deg) translateY(-100vh) translateX(-85vh);
            transform: scale(1.3) rotate(45deg) translateY(-100vh) translateX(-85vh);
  }
}
@-webkit-keyframes floatfront3 {
  0% {
    -webkit-transform: scale(1.3) rotate(45deg) translateY(0) translateX(0);
            transform: scale(1.3) rotate(45deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: scale(1.3) rotate(35deg) translateY(-85vh) translateX(-100vh);
            transform: scale(1.3) rotate(35deg) translateY(-85vh) translateX(-100vh);
  }
}
@keyframes floatfront3 {
  0% {
    -webkit-transform: scale(1.3) rotate(45deg) translateY(0) translateX(0);
            transform: scale(1.3) rotate(45deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: scale(1.3) rotate(35deg) translateY(-85vh) translateX(-100vh);
            transform: scale(1.3) rotate(35deg) translateY(-85vh) translateX(-100vh);
  }
}

主要内容就是这样效果和整体代码我放在上面了，有兴趣大家可以看看。