klouds+spectrum实现可调色调速的canvas云层动画效果代码-html代码-BFW代码库

klouds+spectrum实现可调色调速的canvas云层动画效果代码

代码语言：html

所属分类：动画

代码描述：klouds+spectrum实现可调色调速的canvas云层动画效果代码

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

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/spectrum.min.css">
    <style type="text/css">
        html,body{height:100%;min-height:100%;font-family:'Roboto Slab',serif;font-size:1em;}html,body,ul,li,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}a{color:inherit;text-decoration:none;}a:hover{text-decoration:underline;}#canvasContainer{position:absolute;top:0;left:0;width:100%;height:240px;z-index:-1;}.page{width:960px;margin:0 auto;}header{height:240px;padding:0 40px;display:flex;flex-flow:column;align-items:center;justify-content:center;}header>h1{font-size:3em;margin-bottom:12px;}.fiddle{display:flex;padding-top:40px;}.fiddle>.left{flex:2;display:flex;flex-flow:column;padding-right:40px;}.fiddle>.left>input,.fiddle>.left>div{margin-bottom:20px;}.fiddle>.right{flex:1;display:flex;flex-flow:column;}.fiddle>.right>div{margin-bottom:40px;}.second-cloud-container{height:240px;width:100%;}.full-example{background:#ffbf00;}.full-example>.wrapper{width:960px;margin:0 auto;}.full-example>.wrapper>div{display:flex;}.full-example>.wrapper .code{flex:1;}.full-example>.wrapper .code.html{flex:2;}.code{white-space:pre-wrap;flex:1;padding:4px 16px;border:1px solid #ccc;background:white;margin:16px;border-radius:4px;}
    </style>
</head>

<body>
    <div id="canvasContainer">
        <canvas id="myCanvas"></canvas>
    </div>
    <div class="page">
        <header>
            <h1>canvas云层动画js插件</h1>
        </header>
        <div class="fiddle">
            <div class="left">
                <label>Number of cloud layers:</label>
                <input type="range" id="klouds-range" min="1" max="8" step="1" value="5">
                <label>Speed:</label>
                <input type="range" id="klouds-speed" min="-50" max="50" step="1" value="3">
                <div>
                    <label>Cloud Color 1:</label>
                    <input type="custom" id="klouds-cloudcolor1" value="#19b2cc">
                </div>
                <div>
                    <label>Cloud Color 2:</label>
                    <input type="color" id="klouds-cloudcolor2" value="#ffffff">
                </div>
                <div>
                    <label>Background Color:</label>
                    <input type="color" id="klouds-bgcolor" value="#00667f">
                </div>
            </div>
            <div class="right">
                <h3>Code:</h3>
                <div id="fiddle-code" class="code"></div>
                <h3>Code using jQuery:</h3>
                <div id="fiddle-jq-code" class="code"></div>
            </div>
        </div>
    </div>
    <section class="second-cloud-container">
        <canvas id="second-cloud"></can.........完整代码请登录后点击上方下载按钮下载查看