css实现三维晶莹剔透的漂亮雨滴落下动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现三维晶莹剔透的漂亮雨滴落下动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">


<style type="text/css">
body {
  background: #222;
}

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.window {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: url("//repo.bfw.wiki/bfwrepo/icon/6056bf753c238.jpg");
  background-size: cover;
  background-position: 50%;
  -webkit-filter: blur(10px);
          filter: blur(10px);
}

.raindrops,
.borders,
.drops {
  position: absolute;
}

.drops {
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
}

.raindrop {
  position: absolute;
  border-radius: 100%;
  background-image: url("//repo.bfw.wiki/bfwrepo/icon/6056bf753c238.jpg");
  background-size: 5vw 5vh;
  background-position: 50%;
  -webkit-transform: rotate(180deg) rotateY(0);
          transform: rotate(180deg) rotateY(0);
}

.border {
  position: absolute;
  margin-left: 2px;
  margin-top: 1px;
  border-radius: 100%;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}

.raindrop:nth-child(1) {
  left: 10.04698vw;
  top: 91.82078vh;
  width: 6px;
  height: 7.15325px;
  background-position: 10.04698% 91.82078%;
  -webkit-animation: 3.10099s falling 0.3s ease-in infinite;
          animation: 3.10099s falling 0.3s ease-in infinite;
}

.border:nth-child(1) {
  left: 10.04698vw;
  top: 91.82078vh;
  width: 2px;
  height: 7.15325px;
  -webkit-animation: 3.10099s falling 0.3s ease-in infinite;
          animation: 3.10099s falling 0.3s ease-in infinite;
}

.raindrop:nth-child(2) {
  left: 12.82745vw;
  top: 77.30419vh;
  width: 14px;
  height: 12.27636px;
  background-position: 12.82745% 77.30419%;
  -webkit-animation: 1.67971s falling 0.3s ease-in infinite;
          animation: 1.67971s falling 0.3s ease-in infinite;
}

.border:nth-child(2) {
  left: 12.82745vw;
  top: 77.30419vh;
  width: 10px;
  height: 12.27636px;
  -webkit-animation: 1.67971s falling 0.3s ease-in infinite;
          animation: 1.67971s falling 0.3s ease-in infinite;
}

.raindrop:nth-child(3) {
  left: 99.76471vw;
  top: 20.07903vh;
  width: 8px;
  height: 9.20648px;
  background-position: 99.76471% 20.07903%;
  -webkit-animation: 1.55576s falling 0.3s ease-in infinite;
          animation: 1.55576s falling 0.3s ease-in infinite;
}

.border:nth-child(3) {
  left: 99.76471vw;
  top: 20.07903vh;
  width: 4px;
  height: 9.20648px;
  -webkit-animation: 1.55576s falling 0.3s ease-in infinite;
          animation: 1.55576s falling 0.3s ease-in infinite;
}

.raindrop:nth-child(4) {
  left: 14.96301vw;
  top: 99.31952vh;
  width: 13px;
  height: 14.36884px;
  background-position: 14.96301% 99.31952%;
  -webkit-animation: 2.54729s falling 0.3s ease-in infinite;
          animation: 2.54729s falling 0.3s ease-in infinite;
}

.border:nth-child(4) {
  left: 14.96301vw;
  top: 99.31952vh;
  width: 9px;
  height: 14.36884px;
  -webkit-animation: 2.54729s falling 0.3s ease-in infinite;
          animation: 2.54729s falling 0.3s ease-in infinite;
}

.raindrop:nth-child(5) {
  left: 96.89809vw;
  top: 18.21613vh;
  width: 13px;
  height: 11.63689px;
  background-position: 96.89809% 18.21613%;
  -webkit-animation: 2.40469s falling 0.3s ease-in infinite;
          animation: 2.40469s falling 0.3s ease-in infinite;
}

.border:nth-child(5) {
  left: 96.89809vw;
  top: 18.21613vh;
  width: 9px;
  height: 11.63689px;
  -webkit-animation: 2.40469s falling 0.3s ease-in infinite;
          animation: 2.40469s falling 0.3s ease-in infinite;
}

.raindrop:nth-child(6) {
  left: 7.49532vw;
  top: 34.16121vh;
  width: 11px;
  height: 8.02795px;
  background-position: 7.49532% 34.16121%;
  -webkit-animation: 1.82227s falling 0.3s ease-in infinite;
          animation: 1.82227s falling 0.3s ease-in infinite;
}

.border:nth-child(6) {
  left: 7.49532vw;
  top: 34.16121vh;
  width: 7px;
  height: 8.02795px;
  -webkit-animation: 1.82227s falling 0.3s ease-in infinite;
          animation: 1.82227s falling 0.3s ease-in infinite;
}

.raindrop:nth-child(7) {
  left: 16.83013vw;
  top: 78.48574vh;
  width: 11px;
  height: 8.97741px;
  background-position: 16.83013% 78.48574%;
  -webkit-animation: 1.51951s falling 0.3s ease-in infinite;
          animation: 1.51951s falling 0.3s ease-in infinite;
}

.border:nth-child(7) {
  left: 16.83013vw;
  top: 78.48574vh;
  width: 7px;
  height: 8.97741px;
  -webkit-animation: 1.51951s falling 0.3s ease-in infinite;
          animation: 1.51951s falling 0.3s ease-in infinite;
}

.raindrop:nth-child(8) {
  left: 27.85806vw;
  top: 25.5479vh;
  width: 8px;
  height: 7.10439px;
  background-position: 27.85806% 25.5479%;
  -webkit-animation: 2.65093s falling 0.3s ease-in infinite;
          animation: 2.65093s falling 0.3s ease-in infinite;
}

.border:nth-child(8) {
  left: 27.85806vw;
  top: 25.5479vh;
  width: 4px;
  height: 7.10439px;
  -webkit-animation: 2.65093s falling 0.3s ease-in infinite;
          animation: 2.65093s falling 0.3s ease-in infinite;
}

.raindrop:nth-child(9) {
  left: 8.91327vw;
  top: 40.31462vh;
  width: 14px;
  height: 15.98821px;
  background-position: 8.91327% 40.31462%;
  -webkit-animation: 1.18088s falling 0.3s ease-in infinite;
          animation: 1.18088s falling 0.3s ease-in infinite;
}

.border:nth-child(9) {
  left: 8.91327vw;
  top: 40.31462vh;
  width: 10px;
  height: 15.98821px;
  -webkit-animation: 1.18088s falling 0.3s ease-in infinite;
          animation: 1.18088s falling 0.3s ease-in infinite;
}

.raindrop:nth-child(10) {
  left: 26.45584vw;
  top: 36.95411vh;
  width: 6px;
  height: 6.94801px;
  background-position: 26.45584% 36.95411%;
  -webkit-animation: 2.27066s falling 0.3s ease-in infinite;
          animation: 2.27066s falling 0.3s ease-in infinite;
}

.border:nth-child(10) {
  left: 26.45584vw;
  top: 36.95411vh;
  width: 2px;
  height: 6.94801px;
  -webkit-animation: 2.27066s falling 0.3s ease-in infinite;
          animation: 2.27066s falling 0.3s ease-in infinite;
}

.raindrop:nth-child(11) {
  left: 62.50966vw;
  top: 16.51731vh;
  width: 9px;
  height: 7.55903px;
  background-position: 62.50966% 16.51731%;
  -webkit-animation: 2.19176s falling 0.3s ease-in infinite;
          animation: 2.19176s falling 0.3s ease-in infinite;
}

.border:nth-child(11) {
  left: 62.50966vw;
  top: 16.51731vh;
  width: 5px;
  height: 7.55903px;
  -webkit-animation: 2.19176s falling 0.3s ease-in infinite;
          animation: 2.19176s falling 0.3s ease-in infinite;
}

.raindrop:nth-child(12) {
  left: 34.77929vw;
  top: 9.23411vh;
  width: 6px;
  height: 6.50705px;
  background-position: 34.77929% 9.23411%;
  -webkit-animation: 2.20455s falling 0.3s ease-in infinite;
          animation: 2.20455s falling 0.3s ease-in infinite;
}

.border:nth-child(12) {
  left: 34.77929vw;
  top: 9.23411vh;
  width: 2px;
  height: 6.50705px;
  -webkit-animation: 2.20455s falling 0.3s ease-in infinite;
          animation: 2.20455s falling 0.3s ease-in infinite;
}

.raindrop:nth-child(13) {
  left: 27.24957vw;
  top: 8.1466vh;
  width: 14px;
  height: 12.63108px;
  background-position: 27.24957% 8.1466%;
  -webkit-animation: 2.59341s falling 0.3s ease-in infinite;
          animation: 2.59341s falling 0.3s ease-in infinite;
}

.border:nth-child(13) {
  left: 27.24957vw;
  top: 8.1466vh;
  wi.........完整代码请登录后点击上方下载按钮下载查看