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;
  width: 10px;
  height: 12.63108px;
  -webkit-animation: 2.59341s falling 0.3s ease-in infinite;
          animation: 2.59341s falling 0.3s ease-in infinite;
}

.raindrop:nth-child(14) {
  left: 96.80416vw;
  top: 48.90807vh;
  width: 12px;
  height: 9.7663px;
  background-position: 96.80416% 48.90807%;
  -webkit-animation: 2.52809s falling 0.3s ease-in infinite;
          animation: 2.52809s falling 0.3s ease-in infinite;
}

.border:nth-child(14) {
  left: 96.80416vw;
  top: 48.90807vh;
  width: 8px;
  height: 9.7663px;
  -webkit-animation: 2.52809s falling 0.3s ease-in infinite;
          animation: 2.52809s falling 0.3s ease-in infinite;
}

.raindrop:nth-child(15) {
  left: 28.57202vw;
  top: 76.6333vh;
  width: 12px;
  height: 13.33989px;
  background-position: 28.57202% 76.6333%;
  -webkit-animation: 2.03413s falling 0.3s ease-in infinite;
          animation: 2.03413s falling 0.3s ease-in infinite;
}

.border:nth-child(15) {
  left: 28.57202vw;
  top: 76.6333vh;
  width: 8px;
  height: 13.33989px;
  -webkit-animation: 2.03413s falling 0.3s ease-in infinite;
          animation: 2.03413s falling 0.3s ease-in infinite;
}

.raindrop:nth-child(16) {
  left: 78.37269vw;
  top: 39.20233vh;
  width: 8px;
  height: 9.50339px;
  background-position: 78.37269% 39.20233%;
  -webkit-animation: 1.88546s falling 0.3s ease-in infinite;
          animation: 1.88546s falling 0.3s ease-in infinite;
}

.border:nth-child(16) {
  left: 78.37269vw;
  top: 39.20233vh;
  width: 4px;
  height: 9.50339px;
  -webkit-animation: 1.88546s falling 0.3s ease-in infinite;
          animation: 1.88546s falling 0.3s ease-in infinite;
}

.raindrop:nth-child(17) {
  left: 67.32862vw;
  top: 21.46694vh;
  width: 9px;
  height: 6.43129px;
  background-position: 67.32862% 21.46694%;
  -webkit-animation: 2.54483s falling 0.3s ease-in infinite;
          animation: 2.54483s falling 0.3s ease-in infinite;
}

.border:nth-child(17) {
  left: 67.32862vw;
  top: 21.46694vh;
  width: 5px;
  height: 6.43129px;
  -webkit-animation: 2.54483s falling 0.3s ease-in infinite;
          animation: 2.54483s falling 0.3s ease-in infinite;
}

.raindrop:nth-child(18) {
  left: 6.48706vw;
  top: 74.11866vh;
  width: 16px;
  height: 17.34826px;
  background-position: 6.48706% 74.11866%;
  -webkit-animation: 3.4824s falling 0.3s ease-in infinite;
          animation: 3.4824s falling 0.3s ease-in infinite;
}

.border:nth-child(18) {
  left: 6.48706vw;
  top: 74.11866vh;
  width: 12px;
  height: 17.34826px;
  -webkit-animation: 3.4824s falling 0.3s ease-in infinite;
          animation: 3.4824s falling 0.3s ease-in infinite;
}

.raindrop:nth-child(19) {
  left: 47.47084vw;
  top: 3.63808vh;
  width: 16px;
  height: 13.46968px;
  background-position: 47.47084% 3.63808%;
  -webkit-animation: 2.64643s falling 0.3s ease-in infinite;
          animation: 2.64643s falling 0.3s ease-in infinite;
}

.border:nth-child(19) {
  left: 47.47084vw;
  top: 3.63808vh;
  width: 12px;
  height: 13.46968px;
  -webkit-animation: 2.64643s falling 0.3s ease-in infinite;
          animation: 2.64643s falling 0.3s ease-in infinite;
}

.raindrop:nth-child(20) {
  left: 95.26701vw;
  top: 7.2519vh;
  width: 16px;
  height: 18.00949px;
  background-position: 95.26701% 7.2519%;
  -webkit-animation: 2.29859s falling 0.3s ease-in infinite;
          animation: 2.29859s falling 0.3s ease-in infinite;
}

.border:nth-child(20) {
  left: 95.26701vw;
  top: 7.2519vh;
  width: 12px;
  height: 18.00949px;
  -webkit-animation: 2.29859s falling 0.3s ease-in infinite;
          animation: 2.29859s falling 0.3s ease-in infinite;
}

.raindrop:nth-child(21) {
  left: 50.74041vw;
  top: 19.29607vh;
  width: 15px;
  height: 16.51675px;
  background-position: 50.74041% 19.29607%;
  -webkit-animation: 2.41131s falling 0.3s ease-in infinite;
          animation: 2.41131s falling 0.3s ease-in infinite;
}

.border:nth-child(21) {
  left: 50.74041vw;
  top: 19.29607vh;
  width: 11px;
  height: 16.51675px;
  -webkit-animation: 2.41131s falling 0.3s ease-in infinite;
          animation: 2.41131s falling 0.3s ease-in infinite;
}

.raindrop:nth-child(22) {
  left: 5.64536vw;
  top: 66.39351vh;
  width: 7px;
  height: 6.26128px;
  background-position: 5.64536% 66.39351%;
  -webkit-animation: 2.62917s falling 0.3s ease-in infinite;
          animation: 2.62917s falling 0.3s ease-in infinite;
}

.border:nth-child(22) {
  left: 5.64536vw;
  top: 66.39351vh;
  width: 3px;
  height: 6.26128px;
  -webkit-animation: 2.62917s falling 0.3s ease-in infinite;
          animation: 2.62917s falling 0.3s ease-in infinite;
}

.raindrop:nth-child(23) {
  left: 9.07355vw;
  top: 72.60998vh;
  width: 13px;
  height: 15.22784px;
  background-position: 9.07355% 72.60998%;
  -webkit-animation: 2.94513s falling 0.3s ease-in infinite;
          animation: 2.94513s falling 0.3s ease-in infinite;
}

.border:nth-child(23) {
  left: 9.07355vw;
  top: 72.60998vh;
  width: 9px;
  h.........完整代码请登录后点击上方下载按钮下载查看