H5自定义彩色粒子文字特效代码下载


H5自定义彩色粒子文字特效代码下载
H5自定义彩色粒子文字特效代码下载以及自定义彩色、粒子文字等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script  src="js/script.js"></script>

3. HTML代码

<canvas id="canvas">Canvas not supported.</canvas>
<p id="openController"><a href="#">创建文本</a></p>
<div id="controller">
  <p id="closeController"><a href="#">Close</a></p>
  <dl>
    <dt>
            <p>Change Text</p>
          </dt>
    <dd>
      <input type="text" id="text" value="LOVE ME?" placeholder="输入文本...">
    </dd>
    <dt>
            <p>Composition</p>
          </dt>
    <dd>
      <select id="composition">
              <option value="source-over">source-over</option>
              <option value="lighter" selected>lighter</option>
              <option value="xor">xor</option>
            </select>
    </dd>
    <dt>
            <p>Font Color</p>
          </dt>
    <dd>
      <input type="color" id="fontColor" value="#FFFFFF">
    </dd>
    <dt>
            <p>Background Color</p>
          </dt>
    <dd>
      <input type="color" id="backgroundColor" value="#000000">
    </dd>
    <dt>
            <p>Flexibility</p>
          </dt>
    <dd>
      <input type="checkbox" id="flexibility" checked>
    </dd>
    <dt>
            <p>Font Random Color</p>
          </dt>
    <dd>
      <input type="checkbox" id="randomFontColor" checked>
    </dd>
    <dt>
            <p>Step</p>
          </dt>
    <dd>
      <input type="range" id="step" min="4" max="50" value="8" step="1">
    </dd>
    <dt>
            <p>Font Size</p>
          </dt>
    <dd>
      <input type="range" id="fontSize" min="1" max="500" value="200" step="10">
    </dd>
    <dt>
            <p>Particle Size</p>
          </dt>
    <dd>
      <input type="range" id="particleSize" min="1" max="50" value="10" step="1">
    </dd>
    <dt>
            <p>Angle</p>
          </dt>
    <dd>
      <input type="range" id="increaseAngle" min="1" max="50" value="3" step="1">
    </dd>
  </dl>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

相关推荐

  • 利用HTML5实现Canvas粒子文字特效

    利用HTML5实现Canvas粒子文字特效以及利用HTML5实现、Canvas、粒子文字特效等js/jquery网页特效代码下载。

    Border circle 知秋一叶 2020-03-06 19:31:41 0 0 0

  • html5 canvas彩色粒子文字动画特效

    html5 canvas彩色粒子文字动画特效以及html5、canvas彩色粒子、文字动画特效等js/jquery网页特效代码下载。

    Border circle 石神千空 2019-12-17 19:09:01 0 0 0

发表评论

相关文章