刷墙显示效果-html代码-BFW代码库

代码语言：html
所属分类：动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html, body {
    margin: 0;
    padding: 0;
    background: #000;
    height: 100%;
    width: 100%;
  }
#confetti{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
  }
  
  
  a.iprodev {
    line-height: normal;
    font-family: Varela Round, sans-serif;
    font-weight: 600;
    text-decoration: none;
    font-size: 13px;
    color: #A7AAAE;
    position: absolute;
    left: 20px;
    bottom: 20px;
    border: 1px solid #A7AAAE;
    padding: 12px 20px 10px;
    border-radius: 50px;
    transition: all .1s ease-in-out;
    text-transform: uppercase;
  }
  a.iprodev:hover {
    background: #A7AAAE;
    color: white;
  }
.container{
    width: 400px;
    height: 400px;
   
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.roller{
  height:45px;
  width:400px;
  border: 5px solid #DD92F3;
  border-radius: 10px;
  position: absolute;
  margin: auto;
  left: 0px;
  right: 0px;
  top:0px;
  background-image: linear-gradient(to bottom,#57C0EE,#9DDCE1);
  animation: roller 8s infinite;
}
@keyframes roller{
    50%{
        top:300px;
    }
}

.roller:before{
position: absolute;
content: "";
background-color:rgba(255,255,255,0.5);
height: 5px;
width: 5px;
top: 20px;
left:5px;
border-radius: 7px;
}

.roller:after{
    position: absolute;
    content: "";
    height: 90px;
    width: 80px;
    border: 5px solid #DD92F3;
    border-left: none;
    right: -20px;
    top: 20px;
    z-index: -1;
    border-radius: 7px;
}

.handle{

width: 10px;
background-color: #DD92F3;
position: absolute;
top: 70px;
right: 65px;
}

.handle:after{
    position: absolute;
    content: "";
height: 100px;
width: 25px;
background-color:#DD92F3;
bottom: -150px;

right: -8px;
border-radius: 5px;
}

.paint{
    background-image: linear-gradient(to bottom,#57C0EE,#C4DCE6);;
    height: 0px;
    width: 390px;
    position: absolute;
    margin:auto;
    left:0px;
    right: 0px;
    z-index: -1;
    animation: paint 8s infinite;
   
}
 
.paint p{
  font-family: Segoe Script;
    text-align: center;
  font-size: 50px;
    margin-top:100px;
}

@keyframes paint{
    50%{
        height: 300px;
    }
}
</style>

</head>
<body translate="no">
<!DOCTYPE html>
<html>
<head>
<title>Paint roller animation!</title>
<link rel="stylesheet" href="roll.css" type="text/css">

<script>
                </script>
</head>
<body>
<canvas height='1' id='confetti' width='1'>
<a class='iprodev' href='http://iprodev.com' target='_blank'>iprodev.com</a>
</canvas>
<div class="container">
<div class="roller">
<div class="handle"></div>
</div>
<div class="paint"><p>HELLO FEBRUARY</p></div>
</div>
</div>
</body>
</html>

<script>
var retina = window.devicePixelRatio,

// Math shorthands
PI = Math.PI,
sqrt = Math.sqrt,
round = Math.round,
random = Math.random,
cos = Math.cos,
sin = Math.sin,

// Local WindowAnimationTiming interface
rAF = window.requestAnimationFrame,
cAF = window.cancelAnimationFrame || window.cancelRequestAnimationFrame,
_now = Date.now || function () {return new Date().getTime();};

// Local WindowAnimationTiming interface polyfill
(function (w) {
  /**
                           * Fallback implementation.
                           */
  var prev = _now();
  function fallback(fn) {
    var curr = _now();
    var ms = Math.max(0, 16 - (curr - prev));
    var req = setTimeout(fn, ms);
    prev = curr;
    return req;
  }

  /**
                * Cancel.
                */
  var cancel = w.cancelAnimationFrame ||
  w.webkitCancelAnimationFrame ||
  w.clearTimeout;

  rAF = w.requestAnimationFrame ||
  w.webkitRequestAnimationFrame ||
  fallback;

  cAF = function (id) {
    cancel.call(w, id);
  };
})(window);

document.addEventListener("DOMContentLoaded", function () {
  var speed = 50,
  duration = 1.0 / speed,
  confettiRibbonCount = 11,
  ribbonPaperCount = 30,
  ribbonPaperDist = 8.0,
  ribbonPaperThick = 8.0,
  confettiPaperCount = 95,
  DEG_TO_RAD = PI / 180,
  RAD_TO_DEG = 180 / PI,
  colors = [
  ["#df0049", "#660671"],
  ["#00e857", "#005291"],
  ["#2bebbc", "#05798a"],
  ["#ffd200", "#b06c00"]];


  function Vector2(_x, _y) {
    this.x = _x, this.y = _y;
    this.Length = function () {
      return sqrt(this.SqrLength());
    };
    this.SqrLength = function () {
      return this.x * this.x + this.y * this.y;
    };
    this.Add = function (_vec) {
      this.x += _vec.x;
      this.y += _vec.y;
    };
    this.Sub = function (_vec) {
      this.x -= _vec.x;
      this.y -= _vec.y;
    };
    this.Div = function (_f) {
      this.x /= _f;
      this.y /= _f;
    };
    this.Mul = function (_f) {
      this.x *= _f;
      this.y *= _f;
    };
    this.Normalize = function () {
      var sqrLen = this.SqrLength();
      if (sqrLen != 0) {
        var factor = 1.0 / sqrt(sqrLen);
        this.x *= factor;
        this.y *= factor;
      }
    };
    this.Normalized = function () {
      var sqrLen = this.SqrLength();
      if (sqrLen != 0) {
        var factor = 1.0 / sqrt(sqrLen);
        return new Vector2(this.x * factor, this.y * factor);
      }
      return new Vector2(0, 0);
    };
  }
  Vector2.Lerp = function (_vec0, _vec1, _t) {
    return new Vector2((_vec1.x - _vec0.x) * _t + _vec0.x, (_vec1.y - _vec0.y) * _t + _vec0.y);
  };
  Vector2.Distance = function (_vec0, _vec1) {
    return sqrt(Vector2.SqrDistance(_vec0, _vec1));
  };
  Vector2.SqrDistance = function (_vec0, _vec1) {
    var x = _vec0.x - _vec1.x;
    var y = _vec0.y - _vec1.y;
    return x * x + y * y + z * z;
  };
  Vector2.Scale = function (_vec0, _vec1) {
    return new Vector2(_vec0.x * _vec1.x, _vec0.y * _vec1.y);
  };
  Vector2.Min = function (_vec0, _vec1) {
    return new Vector2(Math.min(_vec0.x, _vec1.x), Math.min(_vec0.y, _vec1.y));
  };
  Vector2.Max = function (_vec0, _vec1) {
    return new Vector2(Math.max(_vec0.x, _vec1.x), Math.max(_vec0.y, _vec1.y));
  };
  Vector2.ClampMagnitude = function (_vec0, _len) {
    var vecNorm = _vec0.Normalized;
    return new Vector2(vecNorm.x * _len, vecNorm.y * _len);
  };
  Vector2.Sub = function (_vec0, _vec1) {
    return new Vector2(_vec0.x - _vec1.x, _vec0.y - _vec1.y, _vec0.z - _vec1.z);
  };

  function EulerMass(_x, _y, _mass, _drag) {
    this.position = new Vector2(_x, _y);
    this.mass = _mass;
    this.drag = _drag;
    this.force = new Vector2(0, 0);
    this.velocity = new Vector2(0, 0);
    this.AddForce = function (_f) {
      this.force.Add(_f);
    };
    this.Integrate = function (_dt) {
      var acc = this.CurrentForce(this.position);
      acc.Div(this.mass);
      var posDelta = new Vector2(this.velocity.x, this.velocity.y);
      posDelta.Mul(_dt);
      this.position.Add(posDelta);
      acc.Mul(_dt);
      this.velocity.Add(acc);
      this.force = new Vector2(0, 0);
    };
    this.CurrentForce = function (_pos, _vel) {
      var totalForce = new Vector2(this.force.x, this.force.y);
      var speed = this.velocity.Length();
      var dragVel = new Vector2(this.velocity.x, this.velocity.y);
      dragVel.Mul(this.drag * this.mass * speed);
      totalForce.Sub(dragVel);
      return totalForce;
    };
  }

  function ConfettiPaper(_x, _y) {
    this.pos = new Vector2(_x, _y);
    this.rotationSpeed = random() * 600 + 800;
    this.angle = DEG_TO_RAD * random() * 360;
    this.rotation = DEG_TO_RAD * random() * 360;
    this.cosA = 1.0;
    this.size = 5.0;
    this.oscillationSpeed = random() * 1.5 + 0.5;
    this.xSpeed = 40.0;
    this.ySpeed = random() * 60 + 50.0;
    this.corners = new Array();
    this.time = random();
    var ci = round(random() * (colors.length - 1));
    this.frontColor = colors[ci][0];
    this.backColor = colors[ci][1];
    for (var i = 0; i < 4; i++) {
      var dx = cos(this.angle + DEG_TO_RAD * (i * 90 + 45));
      var dy = sin(this.angle + DEG_TO_RAD * (i * 90 + 45));
      this.corners[i] = new Vector2(dx, dy);
    }
    this.Update = function (_dt) {
      this.time += _dt;
      this.rotation += this.rotationSpeed * _dt;
      this.cosA = cos(DEG_TO_RAD * this.rotation);
      this.pos.x += cos(this.time * this.oscillationSpeed) * this.xSpeed * _dt;
      this.pos.y += this.ySpeed * _dt;
      if (this.pos.y > ConfettiPaper.bounds.y) {
        this.pos.x = random() * C.........完整代码请登录后点击上方下载按钮下载查看