Comment utiliser CSS et GSAP pour implémenter une animation continue avec plusieurs images clés (code source ci-joint)-tutoriel CSS-php.cn

Table des matières

Aperçu de l'effet

Téléchargement du code source

Interprétation du code

Maison

interface Web

tutoriel CSS

Comment utiliser CSS et GSAP pour implémenter une animation continue avec plusieurs images clés (code source ci-joint)

不言

Sep 12, 2018 pm 05:33 PM

animation css gsap javascript 前端

Le contenu de cet article explique comment utiliser CSS et GSAP pour implémenter une animation continue avec plusieurs images clés (code source ci-joint). Il a une certaine valeur de référence. Les amis dans le besoin pourront s'y référer. .

Aperçu de l'effet

Comment utiliser CSS et GSAP pour implémenter une animation continue avec plusieurs images clés (code source ci-joint)

Téléchargement du code source

https://github.com/comehope/front- end-daily-challenges

Interprétation du code

définit dom, le conteneur contient 10 p sous-éléments, chacun p contient 1 span élément :

<figure class="container">
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
</figure>

Copier après la connexion

Affichage centré :

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: lightyellow;
}

Copier après la connexion

Définir la taille et le style du conteneur :

.container {
    width: 400px;
    height: 400px;
    background: linear-gradient(45deg, tomato, gold);
    border-radius: 3%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

Copier après la connexion

Dessiner 1 élément dans le conteneur, qui a une coquep , à l'intérieur se trouve un petit carré blanc span :

.container {
    position: relative;
}

.container p {
    position: absolute;
    width: inherit;
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container p span {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: white;
}

Copier après la connexion

Définissez des variables d'indice pour les éléments dans le conteneur et laissez les coques des éléments tourner en séquence pour former un cercle, où outline est Lignes auxiliaires :

.container p {
    outline: 1px dashed black;
    transform: rotate(calc((var(--n) - 1) * 36deg));
}

.container p:nth-child(1) { --n: 1; }
.container p:nth-child(2) { --n: 2; }
.container p:nth-child(3) { --n: 3; }
.container p:nth-child(4) { --n: 4; }
.container p:nth-child(5) { --n: 5; }
.container p:nth-child(6) { --n: 6; }
.container p:nth-child(7) { --n: 7; }
.container p:nth-child(8) { --n: 8; }
.container p:nth-child(9) { --n: 9; }
.container p:nth-child(10) { --n: 10; }

Copier après la connexion

À ce stade, le dessin des sous-éléments est terminé, puis nous commençons à écrire le script d'animation.
Présentez la bibliothèque GSAP :

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>

Copier après la connexion

Définissez une variable représentant le sélecteur d'élément enfant :

let elements = &#39;.container p span&#39;;

Copier après la connexion

Déclarez un objet timeline :

let animation = new TimelineMax();

Copier après la connexion

D'abord définissez le mode de saisie de petit (image 1) à grand (image 2). Il n'y a pas de code pour l'image 2. Il est implicite dans la sémantique :

animation.from(elements, 1, {scale: 0});

Copier après la connexion

Laissez les éléments enfants se transformer en bandes verticales et étalées dans toutes les directions (image 3) :

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: &#39;-100px&#39;, scaleX: 0.25});

Copier après la connexion

Laissez les bandes verticales tourner en petits carrés (image 4) :

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: &#39;-100px&#39;, scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180});

Copier après la connexion

Laissez les petits carrés se transformer en longues bandes horizontales pour former un cercle (image 5) :

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: &#39;-100px&#39;, scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1});

Copier après la connexion

Notez que scrimba plantera lors de l'enregistrement de trop d'images, donc les images 6 à 4 11 ne sont pas reflétées dans la vidéo.
Laissez le cercle converger vers l'intérieur et la ligne devient plus fine (image 6):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: &#39;-100px&#39;, scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: &#39;-60px&#39;, scaleY: 0.1});

Copier après la connexion

Laissez la ligne osciller vers la gauche (image 7):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: &#39;-100px&#39;, scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: &#39;-60px&#39;, scaleY: 0.1})
    .to(elements, 1, {x: &#39;-30px&#39;});

Copier après la connexion

Encore une fois, laissez la ligne bascule vers la droite (image 8) :

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: &#39;-100px&#39;, scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: &#39;-60px&#39;, scaleY: 0.1})
    .to(elements, 1, {x: &#39;-30px&#39;})
    .to(elements, 1, {x: &#39;30px&#39;});

Copier après la connexion

Changez ensuite la ligne horizontale en ligne verticale. La forme est similaire à celle de l'image 3, sauf que la ligne est plus fine et plus convergente (. frame 9) :

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: &#39;-100px&#39;, scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: &#39;-60px&#39;, scaleY: 0.1})
    .to(elements, 1, {x: &#39;-30px&#39;})
    .to(elements, 1, {x: &#39;30px&#39;})
    .to(elements, 1, {x: &#39;0&#39;, scaleX: 0.1, scaleY: 1});

Copier après la connexion

Changez ensuite la ligne verticale en ligne horizontale. La forme est similaire à la 5ème image, mais la ligne est plus courte (10ème image) :

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: &#39;-100px&#39;, scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: &#39;-60px&#39;, scaleY: 0.1})
    .to(elements, 1, {x: &#39;-30px&#39;})
    .to(elements, 1, {x: &#39;30px&#39;})
    .to(elements, 1, {x: &#39;0&#39;, scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})

Copier après la connexion

<🎜. >La ligne horizontale est légèrement vers l'extérieur. Répartie en points (image 11) :

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: &#39;-100px&#39;, scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: &#39;-60px&#39;, scaleY: 0.1})
    .to(elements, 1, {x: &#39;-30px&#39;})
    .to(elements, 1, {x: &#39;30px&#39;})
    .to(elements, 1, {x: &#39;0&#39;, scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})
    .to(elements, 1, {y: '-80px', scaleY: 0.5, borderRadius: '50%'});

Copier après la connexion

Laissez les points se déformer en lignes verticales et rétrécir vers l'intérieur. La distance de ce changement est longue, donc le temps d'animation est également. plus long (image 12 Image) :

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: &#39;-100px&#39;, scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: &#39;-60px&#39;, scaleY: 0.1})
    .to(elements, 1, {x: &#39;-30px&#39;})
    .to(elements, 1, {x: &#39;30px&#39;})
    .to(elements, 1, {x: &#39;0&#39;, scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})
    .to(elements, 1, {y: '-80px', scaleY: 0.5, borderRadius: '50%'})
    .to(elements, 1, {y: '-10px', scaleX: 0.1, scaleY: 0.5, borderRadius: '0%', rotation: 0});

Copier après la connexion

Laissez les lignes verticales s'étendre rapidement du centre vers l'extérieur, faites une pause un instant avant de s'étendre, comme si les lignes étaient émises (Image 13) :

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: &#39;-100px&#39;, scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: &#39;-60px&#39;, scaleY: 0.1})
    .to(elements, 1, {x: &#39;-30px&#39;})
    .to(elements, 1, {x: &#39;30px&#39;})
    .to(elements, 1, {x: &#39;0&#39;, scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})
    .to(elements, 1, {y: '-80px', scaleY: 0.5, borderRadius: '50%'})
    .to(elements, 1, {y: '-10px', scaleX: 0.1, scaleY: 0.5, borderRadius: '0%', rotation: 0})
    .to(elements, 1, {y: '-300px', delay: 0.5});

Copier après la connexion

Utilisez la fonction de mise à l'échelle de l'échelle de temps pour doubler la vitesse de lecture de l'animation :

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: &#39;-100px&#39;, scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: &#39;-60px&#39;, scaleY: 0.1})
    .to(elements, 1, {x: &#39;-30px&#39;})
    .to(elements, 1, {x: &#39;30px&#39;})
    .to(elements, 1, {x: &#39;0&#39;, scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})
    .to(elements, 1, {y: '-80px', scaleY: 0.5, borderRadius: '50%'})
    .to(elements, 1, {y: '-10px', scaleX: 0.1, scaleY: 0.5, borderRadius: '0%', rotation: 0})
    .to(elements, 1, {y: '-300px', delay: 0.5})
    .timeScale(2);

Copier après la connexion

Modifiez le code qui déclare la chronologie pour que l'animation soit lue de manière répétée :

let animation = new TimelineMax({repeat: -1, repeatDelay: 1});

Copier après la connexion

À ce stade, l'animation est terminée.

Cachez le contenu à l'extérieur du conteneur et supprimez les lignes auxiliaires

.container {
    overflow: hidden;
}

.container p {
    /* outline: 1px dashed black; */
}

Copier après la connexion

Enfin, décorez les coins de la page :

body {
    overflow: hidden;
}

body::before,
body::after {
    content: &#39;&#39;;
    position: absolute;
    width: 60vmin;
    height: 60vmin;
    border-radius: 50%;
    background: radial-gradient(
        transparent 25%,
        gold 25%, gold 50%,
        tomato 50%
    );
}

body::before {
    left: -30vmin;
    bottom: -30vmin;
}

body::after {
    right: -30vmin;
    top: -30vmin;
}

Copier après la connexion

Vous avez terminé !

Recommandations associées :

Comment utiliser du CSS pur pour obtenir l'effet d'une paire de ciseaux (code source ci-joint)

Comment utiliser du CSS pur pour obtenir un effet d'animation d'illusion de rayures (avec le code source)

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Meilleurs paramètres graphiques

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Solution d'énigmes de coquille

2 Il y a quelques semaines By DDD

R.E.P.O. Comment réparer l'audio si vous n'entendez personne

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Comment déverrouiller tout dans Myrise

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7480

Tutoriel CakePHP

1377

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

NYT Connexions Indices et réponses

Afficher plus

Related knowledge

Comment utiliser le bouton bootstrap Apr 07, 2025 pm 03:09 PM

Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton

Comment redimensionner le bootstrap Apr 07, 2025 pm 03:18 PM

Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-

Comment écrire des lignes fendues sur bootstrap Apr 07, 2025 pm 03:12 PM

Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.

Comment afficher la date de bootstrap Apr 07, 2025 pm 03:03 PM

Réponse: Vous pouvez utiliser le composant de sélecteur de date de bootstrap pour afficher les dates dans la page. Étapes: Présentez le framework bootstrap. Créez une boîte d'entrée de sélecteur de date dans HTML. Bootstrap ajoutera automatiquement des styles au sélecteur. Utilisez JavaScript pour obtenir la date sélectionnée.

Comment configurer le cadre de bootstrap Apr 07, 2025 pm 03:27 PM

Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.

Comment insérer des photos sur bootstrap Apr 07, 2025 pm 03:30 PM

Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.

Comment vérifier la date de bootstrap Apr 07, 2025 pm 03:06 PM

Pour vérifier les dates dans Bootstrap, suivez ces étapes: introduisez les scripts et styles requis; initialiser le composant de sélecteur de date; Définissez l'attribut Data-BV-Date pour activer la vérification; Configurer les règles de vérification (telles que les formats de date, les messages d'erreur, etc.); Intégrez le cadre de vérification de bootstrap et vérifiez automatiquement l'entrée de date lorsque le formulaire est soumis.

Comment utiliser Bootstrap en Vue Apr 07, 2025 pm 11:33 PM

L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.

See all articles