CSS réalise le partage dynamique de code d'arrière-plan de bulle

Cet article vous présente principalement les informations pertinentes sur la méthode de réalisation d'un fond de bulle dynamique avec une animation CSS. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

La première tâche d'aujourd'hui est d'écrire une page de connexion. Le patron m'a donné un cas de test de référence (chao) (xi). Vous pouvez le voir en cliquant sur le lien. Eh bien, cette page de connexion est en effet très concise et élégante, surtout son fond de bulles. La première pensée a été qu'il s'agissait d'une image dynamique. Après avoir ouvert l'élément de critique, j'ai découvert qu'elle était écrite en code, ce qui a soudainement éveillé la curiosité du bébé. . , j'ai donc aussi essayé d'écrire une page de connexion avec un fond de bulle, l'effet est le suivant :

emm... Pourquoi les animations gif téléchargées sont-elles toujours si petites , pour compenser Capture d'écran :

(Vous pouvez imaginer l'image de ces bulles de fond s'élevant tout seul : sanglot :)

Vous pouvez y parvenir avec juste quelques codes simples Pour cet effet,

Nous définissons d'abord 10 balises de liste li. J'utilise le framework vue :

<ul class="bg-bubbles">
    <li v-for="(item, index) in bubbles" :key="index"></li>
</ul>

.

created() {
    this.bubbles.length = 10;
 },

Le style est écrit en moins :

.bg-bubbles {
    position: absolute;
    // 使气泡背景充满整个屏幕
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    li {
      position: absolute;
      // bottom 的设置是为了营造出气泡从页面底部冒出的效果；
      bottom: -160px;
      // 默认的气泡大小；
      width: 40px;
      height: 40px;
      background-color: rgba(255, 255, 255, 0.15);
      list-style: none;
      // 使用自定义动画使气泡渐现、上升和翻滚；
      animation: square 15s infinite;
      transition-timing-function: linear;
      // 分别设置每个气泡不同的位置、大小、透明度和速度，以显得有层次感；
      &:nth-child(1) {
        left: 10%;
      }
      &:nth-child(2) {
        left: 20%;
        width: 90px;
        height: 90px;
        animation-delay: 2s;
        animation-duration: 7s;
      }
      &:nth-child(3) {
        left: 25%;
        animation-delay: 4s;
      }
      &:nth-child(4) {
        left: 40%;
        width: 60px;
        height: 60px;
        animation-duration: 8s;
        background-color: rgba(255, 255, 255, 0.3);
      }
      &:nth-child(5) {
        left: 70%;
      }
      &:nth-child(6) {
        left: 80%;
        width: 120px;
        height: 120px;
        animation-delay: 3s;
        background-color: rgba(255, 255, 255, 0.2);
      }
      &:nth-child(7) {
        left: 32%;
        width: 160px;
        height: 160px;
        animation-delay: 2s;
      }
      &:nth-child(8) {
        left: 55%;
        width: 20px;
        height: 20px;
        animation-delay: 4s;
        animation-duration: 15s;
      }
      &:nth-child(9) {
        left: 25%;
        width: 10px;
        height: 10px;
        animation-delay: 2s;
        animation-duration: 12s;
        background-color: rgba(255, 255, 255, 0.3);
      }
      &:nth-child(10) {
        left: 85%;
        width: 160px;
        height: 160px;
        animation-delay: 5s;
      }
    }
    // 自定义 square 动画；
    @keyframes square {
      0% {
        opacity: 0.5;
        transform: translateY(0px) rotate(45deg);
      }
      25% {
        opacity: 0.75;
        transform: translateY(-400px) rotate(90deg)
      }
      50% {
        opacity: 1;
        transform: translateY(-600px) rotate(135deg);
      }
      100% {
        opacity: 0;
        transform: translateY(-1000px) rotate(180deg);
      }
    }
  }

À ce stade, une image de fond de bulle est terminée. Avec le recul, ce n'est effectivement pas difficile, mais de plus en plus de gens ressentent le charme et la puissance de l'animation CSS :relaxed:.

Recommandations associées :

Tutoriel Photoshop CS5 Variety Brush : Fantasy Bubble Background

Comment utiliser le déclencheur de bouton pour obtenir l'arrière-plan couleur clignotante

Explication détaillée du CSS pour réaliser une image d'arrière-plan de page Web adaptative en plein écran

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!