Table des matières
借助 SASS 完成大致效果
利用 animation-duration 和 animation-delay 构建随机效果
Utilisez SASS pour compléter l'effet brut
Utilisez animation-duration et animation-delay pour créer des effets aléatoires
添加融合效果
利用 backdrop-filter 替代 filter 消除边缘
Maison interface Web tutoriel CSS Animation CSS3 en action : effet de bulle collante super cool

Animation CSS3 en action : effet de bulle collante super cool

Jul 07, 2022 am 10:14 AM
css css3 动画

Cet article vous permettra de parler de l'animation CSS3 et de voir comment utiliser du CSS pur pour obtenir un effet de bulle collante super cool. J'espère que cela sera utile à tout le monde !

Animation CSS3 en action : effet de bulle collante super cool

Récemment, j'ai vu un effet tellement intéressant sur CodePen :

La principale difficulté de cet effet réside dans un effet de fusion spécial des bulles. [Apprentissage recommandé : Tutoriel vidéo CSS]

Le code source se trouve sur : CodePen Demo -- Goey footer L'auteur utilise principalement des filtres SVG pour obtenir cet effet. Si vous êtes intéressé, vous pouvez vérifier le code source. .

Parmi eux, si vous souhaitez utiliser de manière flexible le filtre feGaussianBlur en SVG, vous devez toujours disposer d'une base de connaissances SVG très solide. Alors, cet effet peut-il être obtenu en utilisant uniquement CSS ? feGaussianBlur 滤镜还是需要有非常强大的 SVG 知识储备的。那么,仅仅使用 CSS 能否实现该效果呢?

嘿嘿,强大的 CSS 当然是可以的。本文,就将带领大家一步步使用纯 CSS,完成上述效果。

借助 SASS 完成大致效果

首先,如果上述效果没有气泡的融合效果,可能就仅仅是这样:

要制作这样一个效果还是比较简单的,只是代码会比较多,我们借助 SASS 预处理器即可。

假设我们有如下 HTML 结构:

<div class="g-wrap">
  <div class="g-footer">
    <div class="g-bubble"></div>
    <div class="g-bubble"></div>
    // ... 200 个 g-bubble
  </div>
</div>
Copier après la connexion
Copier après la connexion

核心要做的,仅仅是让 200 个 .g-bubble 从底部无规律的进行向上升起的动画。

这里,就需要运用一种技巧 -- 利用 animation-duration 和 animation-delay 构建随机效果

利用 animation-duration 和 animation-delay 构建随机效果

同一个动画,我们利用一定范围内随机的 animation-duration 和一定范围内随机的 animation-delay,可以有效的构建更为随机的动画效果,让动画更加的自然。

我们来模拟一下,如果是使用 10 个 animation-durationanimation-delay 都一致的圆的话,核心伪代码:

<ul>
    <li></li>
    <!--共 10 个...--> 
    <li></li>
</ul>
Copier après la connexion
ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
}
li {
    background: #000;
    animation: move 3s infinite 1s linear;
}
@keyframes move {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, -100px);
    }
}
Copier après la connexion

这样,小球的运动会是这样的整齐划一:

要让小球的运动显得非常的随机,只需要让 animation-durationanimation-delay 都在一定范围内浮动即可,改造下 CSS:

@for $i from 1 to 11 {
    li:nth-child(#{$i}) {
        animation-duration: #{random(2000)/1000 + 2}s;
        animation-delay: #{random(1000)/1000 + 1}s;
    }
}
Copier après la connexion

我们利用 SASS 的循环和 random() 函数,让 animation-duration 在 2-4 秒范围内随机,让 animation-delay 在 1-2 秒范围内随机,这样,我们就可以得到非常自然且不同的上升动画效果,基本不会出现重复的画面,很好的模拟了随机效果:

CodePen Demo -- 利用范围随机 animation-duration 和 animation-delay 实现随机动画效果

好,我们把上述介绍的技巧,套用到我们本文要实现的效果中去,HTML 结构再看一眼:

<div class="g-wrap">
  <div class="g-footer">
    <div class="g-bubble"></div>
    <div class="g-bubble"></div>
    // ... 200 个 g-bubble
  </div>
</div>
Copier après la connexion
Copier après la connexion

核心的 CSS 代码:

.g-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 86px;
    width: 100%;
    background: #26b4f5;
}

@for $i from 0 through 200 { 
    .g-bubble:nth-child(#{$i}) {
        position: absolute;
        background: #26b4f5;
        $width: random(100) + px;
        left: #{(random(100)) + '%'};
        top: #{(random(100))}px;
        width: $width;
        height: $width;
        animation: moveToTop #{(random(2500) + 1500) / 1000}s ease-in-out -#{random(5000)/1000}s infinite;
    }
}
@keyframes moveToTop {
    90% {
        opacity: 1;
    }
    100% {
        opacity: .08;
        transform: translate(-50%, -180px) scale(.3);
    }
}
Copier après la connexion

这里:

  • 我们利用了 SASS 随机函数 $width: random(100) + px;,随机生成不同大小的 div 圆形

  • 利用 SASS 随机函数 left: #{(random(100)) + '%'}top: #{(random(100))}px 基于父元素随机定位

  • 最为核心的是 animation: moveToTop #{(random(2500) + 1500) / 1000}s ease-in-out -#{random(5000)/1000}s infinite

    Hé, un CSS puissant est certainement possible. Cet article vous guidera étape par étape pour utiliser du CSS pur pour obtenir les effets ci-dessus.
  • Utilisez SASS pour compléter l'effet brut

Tout d'abord, si l'effet ci-dessus n'a pas l'effet de fusion des bulles, cela peut être comme ceci :

Pour faire comme ça Un effet est relativement simple, mais il y aura plus de code. Nous pouvons utiliser le préprocesseur SASS.

🎜Supposons que nous ayons la structure HTML suivante : 🎜
.g-wrap {
    background: #fff;
    filter: contrast(8);
}
.g-footer {
    // ... 其他保持一致
    filter: blur(5px);
}
Copier après la connexion
Copier après la connexion
🎜Ce que le noyau doit faire, c'est simplement animer 200 .g-bubble s'élevant du bas de manière irrégulière. 🎜🎜Ici, vous devez utiliser une technique : Utiliser la durée d'animation et le délai d'animation pour créer des effets aléatoires. 🎜

Utilisez animation-duration et animation-delay pour créer des effets aléatoires

🎜Pour la même animation, nous utilisons une animation-duration aléatoire et un certain Random animation-delay dans la plage peut effectivement créer un effet d'animation plus aléatoire et rendre l'animation plus naturelle. 🎜🎜Simulons-le. Si nous utilisons 10 cercles avec les mêmes animation-duration et animation-delay, le pseudo-code principal : 🎜
.g-footer {
    // ... 
    filter: blur(5px);
}
Copier après la connexion
Copier après la connexion
.g-footer {
    // ... 去掉 filter: blur(5px)
    &:before {
        content: "";
        position: absolute;
        top: -300px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        backdrop-filter: blur(5px);
    }
}
Copier après la connexion
Copier après la connexion
🎜De cette façon, la balle. La rencontre sportive est tellement uniforme : 🎜🎜🎜🎜🎜🎜Pour rendre le mouvement de la balle très aléatoire, faites simplement animation-duration et animation-delay code> peut flotter dans une certaine plage. Transformez le CSS : 🎜rrreee🎜Nous utilisons la boucle SASS et la fonction <code>random() pour créer animation-duration en 2- De manière aléatoire dans la plage. plage de 4 secondes, laissez animation-delay être randomisé dans la plage de 1 à 2 secondes. De cette façon, nous pouvons obtenir un effet d'animation montante très naturel et différent, et il n'y aura pratiquement aucune répétition. images. Bonne simulation d'effets aléatoires : 🎜🎜🎜🎜🎜🎜Démo CodePen -- Utilisation de l'animation aléatoire de plage - la durée et le délai d'animation permettent d'obtenir des effets d'animation aléatoires 🎜🎜🎜D'accord, appliquons les techniques présentées ci-dessus à l'effet que nous souhaitons obtenir dans cet article. Jetez un autre regard sur la structure HTML : 🎜rrreee🎜Code CSS principal : 🎜rrreee🎜. Ici :🎜

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

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

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

Que signifie l'espace réservé en vue Que signifie l'espace réservé en vue May 07, 2024 am 09:57 AM

Dans Vue.js, l'attribut placeholder spécifie le texte d'espace réservé de l'élément d'entrée, qui s'affiche lorsque l'utilisateur n'a pas saisi de contenu, fournit des conseils ou des exemples de saisie et améliore l'accessibilité du formulaire. Son utilisation consiste à définir l'attribut placeholder sur l'élément d'entrée et à personnaliser l'apparence à l'aide de CSS. Les meilleures pratiques consistent à être pertinent par rapport à la contribution, à être court et clair, à éviter le texte par défaut et à prendre en compte l'accessibilité.

Que signifie span en js Que signifie span en js May 06, 2024 am 11:42 AM

La balise span peut ajouter des styles, des attributs ou des comportements au texte. Elle est utilisée pour : ajouter des styles, tels que la couleur et la taille de la police. Définissez des attributs tels que l'identifiant, la classe, etc. Comportements associés tels que clics, survols, etc. Marquez le texte pour un traitement ultérieur ou une citation.

Que signifie rem en js Que signifie rem en js May 06, 2024 am 11:30 AM

REM en CSS est une unité relative par rapport à la taille de la police de l'élément racine (html). Il présente les caractéristiques suivantes : relative à la taille de la police de l'élément racine, non affectée par l'élément parent. Lorsque la taille de la police de l'élément racine change, les éléments utilisant REM s'ajusteront en conséquence. Peut être utilisé avec n’importe quelle propriété CSS. Les avantages de l'utilisation de REM incluent : Réactivité : gardez le texte lisible sur différents appareils et tailles d'écran. Cohérence : assurez-vous que les tailles de police sont cohérentes sur l’ensemble de votre site Web. Évolutivité : modifiez facilement la taille de police globale en ajustant la taille de police de l'élément racine.

Comment introduire des images dans vue Comment introduire des images dans vue May 02, 2024 pm 10:48 PM

Il existe cinq façons d'introduire des images dans Vue : via une URL, une fonction require, un fichier statique, une directive v-bind et une image d'arrière-plan CSS. Les images dynamiques peuvent être gérées dans les propriétés calculées ou les écouteurs de Vue, et des outils fournis peuvent être utilisés pour optimiser le chargement des images. Assurez-vous que le chemin est correct sinon une erreur de chargement apparaîtra.

Qu'est-ce qu'un nœud dans js Qu'est-ce qu'un nœud dans js May 07, 2024 pm 09:06 PM

Les nœuds sont des entités du DOM JavaScript qui représentent des éléments HTML. Ils représentent un élément spécifique de la page et peuvent être utilisés pour accéder et manipuler cet élément. Les types de nœuds courants incluent les nœuds d'élément, les nœuds de texte, les nœuds de commentaires et les nœuds de document. Grâce aux méthodes DOM telles que getElementById(), vous pouvez accéder aux nœuds et opérer sur eux, notamment en modifiant les propriétés, en ajoutant/supprimant des nœuds enfants, en insérant/remplaçant des nœuds et en clonant des nœuds. La traversée des nœuds aide à naviguer dans la structure DOM. Les nœuds sont utiles pour créer dynamiquement du contenu de page, la gestion des événements, l'animation et la liaison de données.

Dans quelle langue le plug-in du navigateur est-il écrit ? Dans quelle langue le plug-in du navigateur est-il écrit ? May 08, 2024 pm 09:36 PM

Les plug-ins de navigateur sont généralement écrits dans les langages suivants : Langages front-end : JavaScript, HTML, CSS Langages back-end : C++, Rust, WebAssembly Autres langages : Python, Java

Comment définir des attributs inconnus dans vscode Méthode vscode pour définir des attributs inconnus Comment définir des attributs inconnus dans vscode Méthode vscode pour définir des attributs inconnus May 09, 2024 pm 02:43 PM

1. Tout d'abord, ouvrez l'icône des paramètres dans le coin inférieur gauche et cliquez sur l'option des paramètres. 2. Ensuite, recherchez la colonne CSS dans la fenêtre sautée. 3. Enfin, remplacez l'option déroulante dans le menu Propriétés inconnues par le bouton d'erreur. .

Que font ref et id dans vue ? Que font ref et id dans vue ? May 02, 2024 pm 08:42 PM

Dans Vue.js, ref est utilisé en JavaScript pour référencer un élément DOM (accessible aux sous-composants et à l'élément DOM lui-même), tandis que id est utilisé pour définir l'attribut HTML id (peut être utilisé pour le style CSS, le balisage HTML et la recherche JavaScript. ).

See all articles