canvas实现鼠标跟随液态奶酪物体动画效果代码

代码语言:html

所属分类:动画

代码描述:canvas实现鼠标跟随液态奶酪物体动画效果代码

代码标签: canvas 鼠标 跟随 液态 奶酪 物体

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    @import url("https://fonts.googleapis.com/css?family=Kavoon");
* {
  box-sizing: border-box;
}

html, body {
  background: #333838;
  width: 100%;
  margin: 2px;
  overflow: hidden;
  cursor: move;
}

canvas {
  filter: url("#gooeyCottonCandy");
}
</style>

</head>
<body>

<canvas id='canv'></canvas>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="gooeyCottonCandy">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 100 -9"/>
    </filter>
  </defs>
</svg>
<!-- partial -->
  <script >
      var c = document.getElementById('canv');
var $ = c.getContext('2d');
var w = c.width = window.innerWidth;
var h = c.height =.........完整代码请登录后点击上方下载按钮下载查看

网友评论0