two创建正方形扭曲动画效果

代码语言:html

所属分类:动画

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


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

<style>
* {
 
margin: 0;
 
padding: 0;
 
box-sizing: border-box;
}

body
{
 
display: flex;
 
justify-content: center;
 
align-items: center;
 
height: 100vh;
 
background: #222222;
}
</style>

</head>
<body translate="no">
<section>
</section>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/two.min.js"></script>

<script>
function easeInOutCubic (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 }
const halfRotation = Math.PI
const fullRotation = Math.PI * 2

function clamp(input, min, max) {
  return Math.max(min, Math.min(input, max))
}

function map(value, low1, high1, low2, high2) {
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0