构建一个凉爽的前端事物生成器

创建一种创造令人印象深刻的前端效果的工具是一种学习，磨练您的技能并有可能获得认可的绝妙方法，无论您的前端体验水平如何。存在许多流行的在线发电机，例如Sarah Drasner的Hero Generator和CSS网格发电机，Themesburg的GlassMorpherism CSS Generator，以及组件AI的广泛收藏，包括其文本阴影生成器。

本文展示了构建动画背景梯度生成器。

带有Next.js的项目设置

该项目利用Next.js易于使用。首先创建一个新的next.js应用程序：

 NPX Create-next-App动画毕业生 - 背景生成器

修改pages/index.js作为应用程序的外壳：

从“ Next/head”进口头；
来自“ ../ Context/settingsContext”的导入{settingsProvider};
从“ ../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中的动画梯度

发电机的基础是基于曼努埃尔·平托（Manuel Pinto）的一个例子，其中具有动画CSS渐变背景。核心CSS是：

身体 {
  背景：线性毕业生（-45DEG，＃EE7752，＃E73C7E，＃23A6D5，＃23D5AB）;
  背景大小：400％400％；
  动画：渐变15S轻松无限；
}

@KeyFrames渐变{
  0％{
    背景位置：0％50％；
  }
  50％{
    背景位置：100％50％；
  }
  100％{
    背景位置：0％50％；
  }
}

梯度产生的反应组件

发电机将允许用户配置：

• 一系列渐变颜色
• 梯度角
• 动画速度

context/SettingsContext.js文件使用高阶组件和默认值管理这些设置：

导入React，{usestate，createContext}来自“ React”；

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

const settingsprovider =（{{children}）=> {
  const [Colorselection，setColorSelection] = usestate（[
    “ Deepskyblue”，
    “ darkviolet”，
    “蓝色的”，
  ）;
  const [Angle，setAngle] = Usestate（300）;
  const [speed，setspeed] = usestate（5）;

  返回 （
    <settingscontext.provider value="{{" colorselection setcolorselection angle setangle speed setspeed>
      {孩子们}
    </settingscontext.provider>
  ）；
};

导出{settingsContext，settingsProvider};

该申请将包括：

• 控件：调整设置。
• AnimatedBackground：显示生成的梯度。
• 输出：显示生成的CSS代码。

components/Controls.js文件（部分显示，完整实现AddColor.js Colors.js 。

从“反应”中导入反应；
从“ ./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，{usecontext}来自“ react”；
import {settingsContext}来自“ ../context/settingscontext”;

const颜色=（）=> {
  const {colorselection，setColorSelection} = usecontext（settingsContext）;

  const onDelete =（DeleteColor）=> {
    setColorSelection（coloreLection.filter（（（颜色）=> color！== deleteColor）））;
  };

  返回 （
    <div>
      {colorseLection.map（（（颜色）=>）
        <div key="{color}" style="{{" display: width: height: marginright: marginbottom: background: color borderradius: position:>
          <button onclick="{()"> OnDelete（颜色）}
            样式= {{{
              背景：“深红色”，
              颜色：“白色”，
              Borderradius：“ 50％”，
              位置：“绝对”，
              顶部：“ -8px”，
              右：“ -8px”，
              边境：“无”，
              fontsize：“ 18px”，
              LineHeight：1，
              宽度：“ 24px”，
              身高：“ 24px”，
              光标：“指针”，
            }}}
          >
            ×
          </button>
        </div>
      ）}}
    </div>
  ）；
};

导出默认颜色；

components/AddColor.js组件（使用react-color进行颜色挑选）：

 // ...（导入语句）

const addColor =（）=> {
  const [displaypicker，setDisplaypicker] = usestate（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，{usecontext}来自“ react”；
import {settingsContext}来自“ ../context/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>{Angle}度</span>
    </div>
  ）；
};

导出默认式井行;

// speedrange.js（相似的结构，使用setSpeed而不是setAngle）

components/Random.js组件（用于生成随机设置）：

导入react，{usecontext}来自“ react”；
import {settingsContext}来自“ ../context/settingscontext”;

const Random =（）=> {
  const {setColorSelection，setAngle，setSpeed} = usecontext（settingsContext）;

  const generaterandomcolor =（）=> {
    返回“＃” Math.floor（Math.random（） * 16777215）.tostring（16）;
  };

  const generataterAndomSettings =（）=> {
    const numcolors = 3 Math.floor（Math.random（） * 3）;
    const颜色= array.from（{length：numcolors}，GeneraterandomColor）;
    setColorSelection（颜色）;
    setAngle（Math.floor（Math.random（） * 360））;
    setSpeed（Math.floor（Math.random（） * 10）1）;
  };

  返回 （
    <button onclick="{generateRandomSettings}">生成随机设置</button>
  ）；
};

导出默认随机；

components/AnimatedBackground.js组件（应用生成的样式）：

导入react，{usecontext}来自“ react”；
import {settingsContext}来自“ ../context/settingscontext”;

const AnimatedBackground =（{children}）=> {
  const {colorselection，speed，angle} = usecontext（settingsContext）;

  const broundst =`线性级别（$ {angle} deg，$ {colorseLection.join（
    “，”
  ）';
  const broundstsize =`$ {colorseLection.length * 60}％$ {
    coloreLection.length * 60
  }％`;
  const Animation =`梯度动画$ {
    coloreLection.length * math.abs（速度-11）
  } sase sease niftinite;

  返回 （
    <div style="{{" background backgroundsize animation minheight:>
      {孩子们}
    </div>
  ）；
};

导出默认的动画背景；

components/Output.js组件（显示并允许复制生成的CSS）：

导入react，{usecontext，usestate}来自“ react”；
import {settingsContext}来自“ ../context/settingscontext”;

const output =（）=> {
  const [复制，setCopied] = usestate（false）;
  const {colorselection，speed，angle} = usecontext（settingsContext）;

  const generatecss =（）=> {
    const broundst =`线性级别（$ {angle} deg，$ {colorseLection.join（
      “，”
    ）';
    const browdssize =`$ {colorseLection.length * 60}％$ {
      coloreLection.length * 60
    }％`;
    const Animation =`梯度动画$ {
      coloreLection.length * math.abs（速度-11）
    } sase sease niftinite;

    返回
      。
        背景：$ {background};
        背景大小：$ {backgroundSize};
        动画：$ {animation};
      }

      @KeyFrames渐变触觉{
        0％{背景位置：0％50％； }
        50％{背景位置：100％50％； }
        100％{背景位置：0％50％； }
      }
    `;
  };

  const handlecopy =（）=> {
    navigator.clipboard.writeText（generatecss（））;
    setCopied（true）;
    settimeout（（）=> setCopied（false），2000）; // 2秒后重置
  };

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

{复制？ “复制！” ：“复制CSS”}

）； }; 导出默认输出；

请记住，将gradient-animation密钥帧添加到您的全局CSS（例如styles/globals.css ）。最后，将您的主要内容包装在pages/index.js中的AnimatedBackground组件中。不要忘记安装react-color ： npm install react-color 。这种详细的分解提供了更强大和用户友好的生成器。请记住根据需要调整样式以进行最佳呈现。

以上是构建一个凉爽的前端事物生成器的详细内容。更多信息请关注PHP中文网其他相关文章！