js实现旋转波纹效果
代码语言：html
所属分类：粒子
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Trochoid ribbons</title>
<style>
* { box-sizing:border-box; }
body { font-family:sans-serif; font-size:0.8em; background:#000; }
canvas { max-width:100%; border-radius:400px; }
#pmenu { border:none; cursor:pointer; padding:none; font-weight:bold; background:none; line-height:1; font-size:26pt; }
div.mb { position:relative; margin:0; padding:0; text-align:center; font-weight:bold; border-top:1px dotted #BBB; border-right:1px solid transparent; border-bottom:1px solid transparent; border-left:1px solid transparent; }
div.pholder { width:188px; padding:4px; height:25px; }
div.slider { position:absolute; top:0px; left:0px; height:26px; opacity:0; background:hsl(240, 30%, 86%); display:block; width:70px; padding:4px 0; border-right:4px solid hsl(240,30%,74%); }
/* 70 of 132 */
div.rtext { position:absolute; top:0px; left:0px; }
div.rlabel { display:inline-block; float:left; white-space:nowrap; padding:4px 0; width:120px; }
div.rep { display:inline-block; float:left; width:32px;margin-right:2px; border-left:1px dotted #EEE; padding:4px 4px 4px 0; text-align:right; }
div.inputdiv { position:absolute; top:0px; left:0px; height:26px; border:1px solid transparent; }
input.range { height:24px; opacity:0.01; cursor:pointer; margin:0; width:152px; }
input.cb { position:absolute; top:0; left:0; opacity:0.01; width:100%; height:24px; cursor:pointer; margin:0; }
div.infoc { border:1px dotted #99F; }
div.locksym { text-align:center; font-size:14px; padding:2px 0; color:black; }
div.lockdiv { position:relative; padding:0; float:right; height:24px; height:26px; margin-top:-1px; }
</style>
</head>
<body translate="no">
<div style="text-align:center;"><canvas id="cta" width="800" height="800"></canvas></div>
<div class="bgfade" style="position:absolute; top:8px; right:8px;">
<div style="text-align:right;">
<button id="pmenu">
<span id="xmrep" style="opacity:0;">×</span>
<span id="pmrep" style="position:absolute; top:3px; right:5px; color:white; opacity:.8;">≡</span>
</button>
</div>
<div id="ctl" style="opacity:0;">
<div class="mb" style="width:100%; height:24px;">
<div class="pholder"> </div>
<div class="rtext">
<div id="ss" class="rlabel" style="width:188px;">Stop</div>
</div>
<div class="inputdiv">
<button style="width:188px; height:24px; display:block; cursor:pointer; padding:0; border:none; opacity:.01;" onfocus="btnFocus(this)" onblur="btnBlur(t.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0