Construire un générateur de choses frontales cool

Créer un outil pour générer des effets frontaux impressionnants est un moyen fantastique d'apprendre, de perfectionner vos compétences et potentiellement de reconnaître, quel que soit votre niveau d'expérience frontal. De nombreux générateurs en ligne populaires existent, tels que le générateur de héros de Sarah Drasner et le générateur de grille CSS, le générateur CSS GlassMorphism de Themesburg, et les composants de la vaste collection de l'AI, y compris leur générateur d'ombres de texte.

Cet article montre la construction d'un générateur de dégradé de fond animé.

Configuration du projet avec next.js

Ce projet utilise Next.js pour sa facilité d'utilisation. Commencez par créer une nouvelle application Next.js:

 NPX Create-next-App animé-Gradient-Background-Generator

Modifier pages/index.js pour servir de shell de l'application:

 Importez la tête de "Suivant / Head";
import {SettingsProvider} depuis "../context/settingscontext";
Contrôles d'importation à partir de "../components/Controls";
Importer la sortie de "../components/output";

Exporter la fonction default home () {
  retour (
    
      
        <title>Générateur de fond de gradient animé CSS</title>
        <meta content="Un outil pour créer des gradients d'arrière-plan animés en CSS pur." name="description">
        <link href="/favicon.ico" rel="icon">
      
      <settingsprovider>
        <main style="{{" padding: textalign:>
          <h1 id="Générateur-de-fond-de-gradient-animé-CSS">Générateur de fond de gradient animé CSS</h1>
          <controls></controls>
          <output></output>
        </main>
      </settingsprovider>
    >
  ));
}

Gradients animés dans CSS

La base du générateur est basée sur un exemple de Manuel Pinto, avec des arrière-plans animés de dégradé CSS. Le noyau CSS est:

 corps {
  Contexte: Linear-Gradient (-45DEG, # EE7752, # E73C7E, # 23A6D5, # 23D5AB);
  taille arrière: 400% 400%;
  Animation: le gradient 15s facilite l'infini;
}

@KeyFrames Gradient {
  0% {
    Position d'arrière-plan: 0% 50%;
  }
  50% {
    Position d'arrière-plan: 100% 50%;
  }
  100% {
    Position d'arrière-plan: 0% 50%;
  }
}

React Composants pour la génération de dégradé

Le générateur permettra aux utilisateurs de configurer:

• Un éventail de couleurs dégradées
• Angle de gradient
• Vitesse d'animation

Le fichier context/SettingsContext.js gère ces paramètres à l'aide d'un composant d'ordre supérieur et de valeurs par défaut:

 Importer React, {UseState, createContext} depuis "react";

const les paramètres Context = createContext ({couleurs: []});

const Settingsprovider = ({enfants}) => {
  const [coulorselection, setColorsElelection] = UseState ([
    "DeepskyBlue",
    "Darkviolet",
    "bleu",
  ]));
  const [angle, setangle] = useState (300);
  const [Speed, setSpeed] = UseState (5);

  retour (
    <settingscontext.provider value="{{" colorselection setcolorselection angle setangle speed setspeed>
      {enfants}
    </settingscontext.provider>
  ));
};

Export {SettingsContext, SetfitSprovider};

La demande comprendra:

• Contrôles: ajuste les paramètres.
• AnimatedBackground: affiche le gradient généré.
• Sortie: montre le code CSS généré.

Le fichier components/Controls.js (partiellement affiché, l'implémentation complète nécessite des composants Colors.js et AddColor.js détaillés ci-dessous):

 importer réagir à partir de "réagir";
Importer des couleurs à partir de "./colors";
Importez AddColor depuis "./addcolor";
Importer Anglerange de "./anglerange";
Importer SpeedRange à partir de "./speedRange";
importer aléatoire à partir de "./random";


const Controls = (accessoires) => (
  <div>
    <colors></colors>
    <addcolor></addcolor>
    <anglerange></anglerange>
    <speedrange></speedrange>
    <random></random>
  </div>
));

Exporter les contrôles par défaut;

Le composant components/Colors.js (gestion de la sélection des couleurs et suppression):

 Importer React, {UseContext} depuis "React";
import {SettingsContext} depuis "../context/settingscontext";

const Colors = () => {
  const {coloreselection, setColOrselection} = useContext (settingsContext);

  const ondelete = (DeleteColor) => {
    setColorsElelection (couleurs de couleurs.filter ((couleur) => couleur! == DeleteColor));
  };

  retour (
    <div>
      {coulorselection.map ((couleur) => (
        <div key="{color}" style="{{" display: width: height: marginright: marginbottom: background: color borderradius: position:>
          <button onclick="{()"> ondelete (couleur)}
            style = {{
              Contexte: "Crimson",
              Couleur: "blanc",
              Borderradius: "50%",
              Position: "Absolu",
              en haut: "-8px",
              à droite: "-8px",
              Border: "Aucun",
              Fontsize: "18px",
              LineHeight: 1,
              Largeur: "24px",
              hauteur: "24px",
              curseur: "pointeur",
            }}
          >
            ×
          </button>
        </div>
      ))}
    </div>
  ));
};

exporter les couleurs par défaut;

Le composant components/AddColor.js (en utilisant react-color pour la sélection des couleurs):

 // ... (instructions d'importation)

const addColor = () => {
  const [displayPicker, setDisplayPicker] = useState (false);
  const {coloreselection, setColOrselection} = useContext (settingsContext);

  const handlecolorchange = (couleur) => {
    setColorselection ([... coloreselection, colore.hex]);
    setDisplayPicker (false);
  };

  retour (
    <div>
      <button onclick="{()"> setDisplayPicker (! DisplayPicker)}>
        Ajouter la couleur
      </button>
      {displayPicker && (
        <chromepicker color="#fff" onchangecomplete="{handleColorChange}"></chromepicker>
      )}
    </div>
  ));
};

Exporter par défaut addColor;

Les components/AngleRange.js et components/SpeedRange.js Composants (Angle de manipulation et réglages de vitesse):

 // anglerange.js
Importer React, {UseContext} depuis "React";
import {SettingsContext} depuis "../context/settingscontext";

const anglerange = () => {
  const {angle, setangle} = useContext (settingsContext);

  retour (
    <div style="{{" marginbottom:>
      <label htmlfor="angle">Angle:</label>
      <input type="range" id="angle" min="0" max="360" value="{angle}" onchange="{(e)"> setangle (parseInt (e.target.value, 10))}
      />
      <span>{angle} degrés</span>
    </div>
  ));
};

Exporter Anglerange par défaut;

// SpeedRange.js (structure similaire, en utilisant SetSpeed ​​au lieu de setangle)

Le composant components/Random.js (pour générer des paramètres aléatoires):

 Importer React, {UseContext} depuis "React";
import {SettingsContext} depuis "../context/settingscontext";

const random = () => {
  const {setColOrselection, setangle, setSpeed} = useContext (settingsContext);

  const generaterandomcolor = () => {
    retourner "#" Math.floor (math.random () * 16777215) .ToString (16);
  };

  const generaterandomsettings = () => {
    Cons numColors = 3 Math.floor (math.random () * 3);
    const Colors = array.from ({longueur: numColors}, generaterandomColor);
    setColorselection (couleurs);
    setangle (math.floor (math.random () * 360));
    setSpeed ​​(math.floor (math.random () * 10) 1);
  };

  retour (
    <button onclick="{generateRandomSettings}">Générer des paramètres aléatoires</button>
  ));
};

Exporter par défaut aléatoire;

Le composant components/AnimatedBackground.js (applique les styles générés):

 Importer React, {UseContext} depuis "React";
import {SettingsContext} depuis "../context/settingscontext";

const AnimatedBackground = ({enfants}) => {
  const {coloreselection, speed, angle} = useContext (settingsContext);

  const Background = `linéaire-gradient ($ {angle} deg, $ {coloreselection.join (
    ","
  )}) `;
  const BackgroundSize = `$ {coulorselection.length * 60}% $ {
    coloreselection.length * 60
  }% `;
  const Animation = `Gradient-Animation $ {
    ColordeSelection.length * Math.abs (vitesse - 11)
  } s faciliter infin ';

  retour (
    <div style="{{" background backgroundsize animation minheight:>
      {enfants}
    </div>
  ));
};

Exporter par défaut AnimatedBackground;

Le composant components/Output.js (affiche et permet de copier le CSS généré):

 importer react, {useContext, useState} de "react";
import {SettingsContext} depuis "../context/settingscontext";

const Output = () => {
  const [copié, setCopied] = useState (false);
  const {coloreselection, speed, angle} = useContext (settingsContext);

  const generatecss = () => {
    const Background = `linéaire-gradient ($ {angle} deg, $ {coloreselection.join (
      ","
    )}) `;
    const BackgroundSize = `$ {coulorselection.length * 60}% $ {
      coloreselection.length * 60
    }% `;
    const Animation = `Gradient-Animation $ {
      ColordeSelection.length * Math.abs (vitesse - 11)
    } s faciliter infin ';

    Retour '
      .Gradient-Background {
        Contexte: $ {fond};
        Background-Size: $ {backgroundSize};
        Animation: $ {animation};
      }

      @KeyFrames Gradient-Animation {
        0% {Position d'arrière-plan: 0% 50%; }
        50% {Position de fond: 100% 50%; }
        100% {position de fond: 0% 50%; }
      }
    `;
  };

  const handlecopy = () => {
    navigator.clipboard.writeText (generatecss ());
    setcopied (true);
    setTimeout (() => setcopied (false), 2000); // Réinitialiser après 2 secondes
  };

  retour (
    <div style="{{" margintop:>
      <pre class="brush:php;toolbar:false">{generatecss ()}

{copié? "Copied!" : "Copier CSS"}

)); }; Exporter la sortie par défaut;

N'oubliez pas d'ajouter les images clés de gradient-animation à votre CSS global (par exemple, styles/globals.css ). Enfin, enveloppez votre contenu principal dans le composant AnimatedBackground dans pages/index.js . N'oubliez pas d'installer react-color : npm install react-color . Cette ventilation détaillée fournit un générateur plus robuste et convivial. N'oubliez pas d'ajuster le style au besoin pour une présentation optimale.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!