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