멋진 프론트 엔드 물건 생성기 구축

인상적인 프론트 엔드 효과를 생성하는 도구를 만드는 것은 프론트 엔드 경험 수준에 관계없이 배우고, 기술을 연마하고, 잠재적으로 인식을 얻는 환상적인 방법입니다. Sarah Drasner의 Hero Generator 및 CSS 그리드 생성기, Temesburg의 Glassmorphism CSS Generator 및 텍스트 그림자 발전기를 포함하여 AI의 광범위한 컬렉션과 같은 많은 인기있는 온라인 발전기가 존재합니다.

이 기사에서는 애니메이션 배경 그라디언트 생성기를 구축하는 것을 보여줍니다.

Next.js의 프로젝트 설정

이 프로젝트는 사용 편의성을 위해 Next.js를 사용합니다. 새로운 Next.js 앱을 만들어 시작하십시오.

 NPX 제작 -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의 애니메이션 그라디언트

발전기의 기초는 애니메이션 CSS 그라디언트 배경을 특징으로하는 Manuel Pinto의 예를 기반으로합니다. 핵심 CSS는 다음과 같습니다.

 몸 {
  배경 : 선형 등급 (-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  배경 크기 : 400% 400%;
  애니메이션 : 그라디언트 15는 편안합니다.
}

@keyframes gradient {
  0% {
    배경 위치 : 0% 50%;
  }
  50% {
    배경 위치 : 100% 50%;
  }
  100% {
    배경 위치 : 0% 50%;
  }
}

그라디언트 생성에 대한 구성 요소를 반응합니다

생성기를 통해 사용자는 다음을 구성 할 수 있습니다.

• 그라디언트 색상 배열
• 그라디언트 각도
• 애니메이션 속도

context/SettingsContext.js 파일은 고차 컴포넌트 및 기본값을 사용하여 이러한 설정을 관리합니다.

 import React, {usestate, createContext} "React";

const settingscontext = createContext ({colorSelection : []});

const settingsprovider = ({children}) => {
  const [Colorselection, setColorSelection] = usestate ([[[
    "Deepskyblue",
    "Darkviolet",
    "파란색",
  ]);
  const [angle, setangle] = usestate (300);
  const [속도, setSpeed] = usestate (5);

  반품 (
    <settingscontext.provider value="{{" colorselection setcolorselection angle setangle speed setspeed>
      {어린이들}
    </settingscontext.provider>
  );
};

내보내기 {settingscontext, settingsprovider};

응용 프로그램은 다음으로 구성됩니다.

• 컨트롤 : 설정을 조정합니다.
• 애니메이션 백 : 생성 된 그라디언트를 표시합니다.
• 출력 : 생성 된 CSS 코드를 보여줍니다.

components/Controls.js 파일 (부분적으로 표시되면 전체 구현에는 Colors.js 및 AddColor.js 구성 요소가 아래에 자세히 설명되어 있습니다) :

 "React"에서 React 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 구성 요소 (색상 선택 및 삭제 처리) :

 import React, {usecontext} "React"에서;
"../context/settingscontext"에서 {settingscontext} 가져 오기;

const colors = () => {
  const {colorsElection, setColorSelection} = usecontext (settingscontext);

  const ondelete = (deletecolor) => {
    setColorSelection (colorsElection.filter ((color) => 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
import React, {usecontext} "React"에서;
"../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>{angle}도</span>
    </div>
  );
};

수출 기본 앵글 레인지;

// speedrange.js (setangle 대신 setspeed를 사용하는 유사한 구조)

components/Random.js 구성 요소 (랜덤 설정 생성) :

 import React, {usecontext} "React"에서;
"../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 (색상);
    setangle (math.floor (math.random () * 360));
    setSpeed ​​(math.floor (math.random () * 10) 1);
  };

  반품 (
    <button onclick="{generateRandomSettings}">임의의 설정을 생성합니다</button>
  );
};

기본 임의의 내보내기;

components/AnimatedBackground.js 구성 요소 (생성 된 스타일을 적용) :

 import React, {usecontext} "React"에서;
"../context/settingscontext"에서 {settingscontext} 가져 오기;

const animatedbackground = ({children}) => {
  const {ColorSelection, 속도, 각도} = usecontext (settingscontext);

  const background =`linear-gradient ($ {angle} deg, $ {colorselection.join (
    ","
  )})`;
  const backgroundsize =`$ {colorselection.length * 60}% $ {
    색 선택. 길이 * 60
  }%`;
  const animation =`그라디언트 애니메이션 $ {
    ColorSelection.length * Math.abs (속도 -11)
  }는 편안한 무한`;

  반품 (
    <div style="{{" background backgroundsize animation minheight:>
      {어린이들}
    </div>
  );
};

기본 애니메이션 백 그라운드 내보내기;

components/Output.js 구성 요소 (생성 된 CSS를 표시하고 복사 할 수 있음) :

 import React, {usecontext, usestate} "react";
"../context/settingscontext"에서 {settingscontext} 가져 오기;

const output = () => {
  const [복사, setCopied] = usestate (false);
  const {ColorSelection, 속도, 각도} = usecontext (settingscontext);

  const generatecss = () => {
    const background =`linear-gradient ($ {angle} deg, $ {colorselection.join (
      ","
    )})`;
    const backgroundsize =`$ {colorselection.length * 60}% $ {
      색 선택. 길이 * 60
    }%`;
    const animation =`그라디언트 애니메이션 $ {
      ColorSelection.length * Math.abs (속도 -11)
    }는 편안한 무한`;

    반환`
      . 그라디언트 백 {
        배경 : $ {배경};
        배경 크기 : $ {backgroundsize};
        애니메이션 : $ {animation};
      }

      @keyframes Gradient-Animation {
        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 ()}

{복사? "복사!" : "COPSS"}

); }; 기본 출력 내보내기;

gradient-animation 키 프레임을 글로벌 CSS (예 : styles/globals.css )에 추가하십시오. 마지막으로, pages/index.js 의 AnimatedBackground 구성 요소 내에서 기본 컨텐츠를 감싸십시오. react-color : npm install react-color 하는 것을 잊지 마십시오. 이 자세한 고장은보다 강력하고 사용자 친화적 인 생성기를 제공합니다. 최적의 프리젠 테이션을 위해 필요한 스타일을 조정해야합니다.

위 내용은 멋진 프론트 엔드 물건 생성기 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!