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 = 1050;
var angle = 21;

function setup() {
  if (window.innerWidth < 801) droplets = 400; //reduce drops on small displays
  noStroke();
  colorMode(RGB, 255, 255, 255, 1);
  createCanvas(window.innerWidth, window.innerHeight);
  for (var i = 0; i < droplets; i++) {
    var x = random(width);
    var y = random(-height); //start off screen
    var r = random(0.2, 1.2);
    var h = random(20, 255); //amount of blue
    var b = random(10, 250); //opacity
    var s = random(0.02, 0.06); //speed
    waterfall[i] = new WaterFall(x, y, r, h, b, s); //.........完整代码请登录后点击上方下载按钮下载查看