p5实现飞流效果-html代码-BFW代码库

p5实现飞流效果

代码语言：html

所属分类：瀑布流

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

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

<title> - Waterfall in P5js</title>
<style>
    body {padding: 0; margin: 0; overflow: hidden;}

.container {
  display: block;
  background-color: transparent;
  width: 800px;
  height: 50px;
  position: absolute;
  top: 42%;
  left: 100%;
  margin-left: -400px;
  margin-top: -25px;
  color: white;
  margin: 0 auto;
  font-size: 30px;
  font-family: Arial;
  display: block;
  animation: glow 6s linear forwards, scroll 6s linear forwards;
}

@keyframes glow {
  0% {color: transparent; }
  35% {color: white; }
  65% {color: white; }
  75% {color: transparent; }
  100% {color: transparent; }
  
}

@keyframes scroll {
  0% {left: 100%;}
  100% {left: -100%;}
}
  </style>

</head>
<body translate="no">
<div class="container">鼠标点击切换效果</div>

<script src='http://repo.bfw.wiki/bfwrepo/js/p5.min.js'></script>
<script>
     var waterfall = [];
var dropletWidth = .15;
var droplets = .........完整代码请登录后点击上方下载按钮下载查看