クールなフロントエンドのものジェネレーターを構築します

印象的なフロントエンド効果を生成するためのツールを作成することは、フロントエンドのエクスペリエンスレベルに関係なく、学習し、スキルを磨き、潜在的に認識を得るための素晴らしい方法です。 Sarah DrasnerのヒーロージェネレーターやCSSグリッドジェネレーター、ThemesburgのGlassmorphism CSSジェネレーター、テキストShadowsジェネレーターを含むコンポーネントAIの広範なコレクションなど、多くの人気のあるオンラインジェネレーターが存在します。

この記事では、アニメーション化されたバックグラデーション勾配ジェネレーターの構築を示しています。

next.jsでプロジェクトのセットアップ

このプロジェクトは、使いやすさのためにnext.jsを利用しています。新しいnext.jsアプリを作成することから始めます：

 npx create-next-appアニメーション化 - グラウンドグラウンド生成器

pages/index.jsを変更して、アプリケーションのシェルとして機能します。

 「next/head」からヘッドをインポートします。
"../context/settingscontext"から{settingsprovider}をimpont {settingsprovider}からimpontします。
"../components/controls"からコントロールをインポートします。
"../components/output"から出力をインポートします。

デフォルト機能Home（）をエクスポートする{
  戻る （
    
      
        <title>アニメーションCSSグラデーションバックグラウンドジェネレーター</title>
        <meta content="純粋なCSSでアニメーションのバックグラウンド勾配を作成するためのツール。" name="description">
        <link href="/favicon.ico" rel="icon">
      
      <settingsprovider>
        <main style="{{" padding: textalign:>
          <h1 id="アニメーションCSSグラデーションバックグラウンドジェネレーター">アニメーションCSSグラデーションバックグラウンドジェネレーター</h1>
          <controls></controls>
          <output></output>
        </main>
      </settingsprovider>
    >
  ）;
}

CSSのアニメーション勾配

ジェネレーターの基礎は、アニメーション化されたCSSグラデーションの背景を備えたManuel Pintoの例に基づいています。コアCSSは次のとおりです。

体 {
  背景：線形勾配（-45Deg、＃ee7752、＃e73c7e、＃23a6d5、＃23d5ab）;
  バックグラウンドサイズ：400％400％;
  アニメーション：グラデーション15Sを無限に緩和します。
}

@KeyFramesGradient {
  0％{
    バックグラウンドポジション：0％50％;
  }
  50％{
    バックグラウンドポジション：100％50％;
  }
  100％{
    バックグラウンドポジション：0％50％;
  }
}

勾配生成のための反応成分

ジェネレーターは、ユーザーが構成できるようにします。

• グラデーションカラーの配列
• 勾配角
• アニメーション速度

context/SettingsContext.jsファイルは、高次コンポーネントとデフォルト値を使用してこれらの設定を管理します。

 「React」からReact、{UseState、CreateContext}をインポート。

const settingsContext = createContext（{colorselection：[]}）;

const settingsprovider =（{children}）=> {
  const [colorselection、setcolorselection] = ueseState（[
    「deepskyblue」、
    「darkviolet」、
    "青"、
  ]）;
  const [angle、setangle] = uesestate（300）;
  const [speed、setSpeed] = uesestate（5）;

  戻る （
    <settingscontext.provider value="{{" colorselection setcolorselection angle setangle speed setspeed>
      {子供たち}
    </settingscontext.provider>
  ）;
};

export {settingsContext、settingSprovider};

アプリケーションは次のものになります：

• コントロール：設定を調整します。
• AnimatedBackground：生成された勾配を表示します。
• 出力：生成されたCSSコードを表示します。

components/Controls.jsファイル（部分的に表示されている、完全な実装にはColors.jsとAddColor.jsコンポーネントが必要です）：

 「React」からのImport React;
「./Colors」から色をインポートします。
"./addcolor"からaddcolorをインポートします。
「./Anglerange」からアングランゲをインポートします。
"./speedrange"からspeedrangeをインポートします。
「./random」からランダムをインポートします。


const controls =（props）=>（
  <div>
    <colors></colors>
    <addcolor></addcolor>
    <anglerange></anglerange>
    <speedrange></speedrange>
    <random></random>
  </div>
）;

デフォルトコントロールをエクスポートします。

components/Colors.jsコンポーネント（色の選択と削除の処理）：

 「React」からReact、{UseContext}をインポートします。
"../context/settingscontext"から{settingsContext}をインポートします。

const colors =（）=> {
  const {colorselection、setcolorselection} = usecontext（settingsContext）;

  const ondelete =（deleteColor）=> {
    setColorSelection（colorselection.filter（（color）=> color！== deleteColor））;
  };

  戻る （
    <div>
      {colorselection.map（（color）=>（
        <div key="{color}" style="{{" display: width: height: marginright: marginbottom: background: color borderradius: position:>
          <button onclick="{()"> ondelete（color）}
            style = {{
              背景：「クリムゾン」、
              色：「白」、
              Borderradius：「50％」、
              ポジション：「絶対」、
              トップ： "-8px"、
              右： "-8px"、
              国境：「なし」、
              fontsize： "18px"、
              LineHeight：1、
              幅：「24px」、
              高さ：「24px」、
              カーソル：「ポインター」、
            }}
          >
            ×
          </button>
        </div>
      ））}
    </div>
  ）;
};

デフォルトの色をエクスポートします。

components/AddColor.jsコンポーネント（カラーピッキングにreact-colorを使用）：

 // ...（インポートステートメント）

const addcolor =（）=> {
  const [displayPicker、setDisplayPicker] = ueseState（false）;
  const {colorselection、setcolorselection} = usecontext（settingsContext）;

  const handlecolorchange =（color）=> {
    setColorSelection（[... colorselection、color.hex]）;
    setDisplayPicker（false）;
  };

  戻る （
    <div>
      <button onclick="{()"> setDisPlayPicker（！displayPicker）}>
        色を追加します
      </button>
      {displayPicker &&（
        <chromepicker color="#fff" onchangecomplete="{handleColorChange}"></chromepicker>
      ）}
    </div>
  ）;
};

エクスポートデフォルトのaddcolor。

components/AngleRange.jsおよびcomponents/SpeedRange.jsコンポーネント（処理角度と速度調整）：

 // Anglerange.js
「React」からReact、{UseContext}をインポートします。
"../context/settingscontext"から{settingsContext}をインポートします。

const anglerange =（）=> {
  const {angle、setangle} = usecontext（settingsContext）;

  戻る （
    <div style="{{" marginbottom:>
      <label htmlfor="angle">角度：</label>
      <input type="range" id="angle" min="0" max="360" value="{angle}" onchange="{(e)"> setangle（parseint（e.target.value、10））}
      />
      <span>{角度}度</span>
    </div>
  ）;
};

デフォルトのアングレンジをエクスポートします。

// speedrange.js（同様の構造、setangleの代わりにsetSpeedを使用）

components/Random.jsコンポーネント（ランダム設定を生成するため）：

 「React」からReact、{UseContext}をインポートします。
"../context/settingscontext"から{settingsContext}をインポートします。

const random =（）=> {
  const {setColorSelection、setangle、setSpeed} = useContext（settingsContext）;

  const generaterandomcolor =（）=> {
    return "＃" math.floor（math.random（） * 16777215）.toString（16）;
  };

  const generaterandomsettings =（）=> {
    const numcolors = 3 math.floor（math.random（） * 3）;
    const colors = array.from（{length：numcolors}、generaterandomcolor）;
    setColorSelection（colors）;
    setangle（math.floor（math.random（） * 360））;
    setSpeed（math.floor（math.random（） * 10）1）;
  };

  戻る （
    <button onclick="{generateRandomSettings}">ランダム設定を生成します</button>
  ）;
};

デフォルトのランダムをエクスポートします。

components/AnimatedBackground.jsコンポーネント（生成されたスタイルを適用）：

 「React」からReact、{UseContext}をインポートします。
"../context/settingscontext"から{settingsContext}をインポートします。

const Animatedbackground =（{children}）=> {
  const {colorselection、速度、角度} = useContext（settingsContext）;

  const background = `linear-gradient（$ {angle} deg、$ {colorselection.join（
    "、"
  ）}） `;
  const backgroundsize = `$ {colorselection.length * 60}％$ {
    ColorSelection.length * 60
  }％ `;
  const animation = `gradient-animation $ {
    colorselection.length * math.abs（speed -11）
  } s ease infinite`;

  戻る （
    <div style="{{" background backgroundsize animation minheight:>
      {子供たち}
    </div>
  ）;
};

デフォルトのアニメーションバックグラウンドをエクスポートします。

components/Output.jsコンポーネント（生成されたCSSを表示およびコピーすることができます）：

 「React」からReact、{UseContext、UseState}をインポートします。
"../context/settingscontext"から{settingsContext}をインポートします。

const output =（）=> {
  const [copied、setCopied] = uesestate（false）;
  const {colorselection、速度、角度} = useContext（settingsContext）;

  const generatecss =（）=> {
    const background = `linear-gradient（$ {angle} deg、$ {colorselection.join（
      "、"
    ）}） `;
    const backgroundsize = `$ {colorselection.length * 60}％$ {
      ColorSelection.length * 60
    }％ `;
    const animation = `gradient-animation $ {
      colorselection.length * math.abs（speed -11）
    } s ease infinite`;

    `を返します
      .gradient-background {
        背景：$ {background};
        バックグラウンドサイズ：$ {backgroundsize};
        アニメーション：$ {アニメーション};
      }

      @KeyFrames Gradient-Animation {
        0％{background-position：0％50％; }
        50％{バックグラウンドポジション：100％50％; }
        100％{background-position：0％50％; }
      }
    `;
  };

  const handlecopy =（）=> {
    navigator.clipboard.writeText（generatecss（））;
    setCopied（true）;
    setimeout（（）=> setCopied（false）、2000）; // 2秒後にリセットします
  };

  戻る （
    <div style="{{" margintop:>
      <pre class="brush:php;toolbar:false">{generatecss（）}

{コピー？ 「コピー！」 ：「CSSをコピー」}

）; }; デフォルトの出力をエクスポートします。

グローバルCSS（ styles/globals.cssなど）にgradient-animationキーフレームを追加することを忘れないでください。最後に、 pages/index.jsのAnimatedBackgroundコンポーネント内にメインコンテンツをラップします。 react-color ： npm install react-colorすることを忘れないでください。この詳細な内訳は、より堅牢でユーザーフレンドリーなジェネレーターを提供します。最適なプレゼンテーションのために必要に応じてスタイリングを調整することを忘れないでください。

以上がクールなフロントエンドのものジェネレーターを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。