js实现的长方形多层次背景效果-html代码-BFW代码库

js实现的长方形多层次背景效果

代码语言：html

所属分类：背景

代码描述：js实现的长方形背景效果，多层次，多色彩，倾斜状

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


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

<style>
body {
	margin: 0;
}

#content {
	height: 100vh;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.stripes {
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.stripe {
	display: block;
	left: 0;
	position: absolute;
	transform-origin: center center;
	width: 100%;
}

.foreground-stripes {
	z-index: 3;
}

.background-stripes--left {
	left: 0;
	width: 50%;
	z-index: 2;
}

.background-stripes--left {
	right: 0;
	width: 50%;
	z-index: 1;
}
</style>

</head>
<body translate="no">

<main id="content">
<div id="background-stripes--left" class="background-stripes--left stripes"></div>
<div id="background-stripes--right" class="background-stripes--right stripes"></div>
<div id="foreground-stripes" class="foreground-stripes stripes"></div>
</main>

<script>
'use strict';

window.addEventListener('load', event => {

  generate();

});

document.addEventListener('click', event => {

  generate();

});

function generate() {

  let skew = Math.random() < 0.5 ? -8 : 8;

  new Stripes('foreground-stripes', {
    totalStripes: 5,
    minStripeHeight: 20,
    maxStripeHeight: 40,
    minStripeSpeed: 400,
    maxStripeSpeed: 1200,
    stripeColors: ['#D3EA77', '#FFF', '#000'],
    stripeSkews: [skew] });


  new Stripes('background-stripes--left', {
    totalStripes: 30,
    minStripeHeight: 100,
    maxStripeHeight: 200,
    minStripeSpeed: 400,
    maxStripeSpeed: 800,
    stripeColors: ['#D3EA77', '#FFF', '#000'],
    stripeSkews: [skew] });


  new Stripes('background-stripes--right', {
    totalStripes: 30,
    minStripeHeight: 100,
    maxStripeHeight: 200,
    minStripeSpeed: 400,
    maxStripeSpeed: 800,
    stripeColors: ['#34344A', '#80475E', '#CC5A71'],
    stripeSkews: [skew] });


}

class Stripe {

  constructor(options) {

    this.container = document.createElement('div');
    this.width = 0;
    this.startWidth = 20;
    this.destWidth = 80;
    this.height = 0;
    this.bottom = 0;
    this.color = '#000';
    this.origin = 'left';
    this.skew = 0;
    this.animationStart = Date.now();
    this.animationSpeed = 4000;
    this.fps = 60;

    for (let key in options) {
      if (options.hasOwnProperty(key)) {
        this[key] = options[key];
      }
    }

    this.container.className = 'stripe';

    this.interval = setInterval(this.update.bind(this), 1000 / this.fps);
    setTimeout(this.finish.bind(this), this.animationSpeed);

  }

  stylize().........完整代码请登录后点击上方下载按钮下载查看