CSS realisiert die gemeinsame Nutzung von Hintergrundcode für dynamische Blasen

Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zur Methode zur Realisierung dynamischer Blasenhintergründe mit CSS-Animation vor. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Die erste Aufgabe besteht heute darin, eine Anmeldeseite zu schreiben. Der Chef hat mir einen Referenz-(Chao-)Test-(xi)-Fall gegeben. Sie können ihn sehen, indem Sie auf den Link klicken. Nun, diese Anmeldeseite ist in der Tat sehr prägnant und elegant, insbesondere der Blasenhintergrund. Der erste Gedanke war, dass es sich um ein dynamisches Bild handeln sollte. Nachdem ich das Rezensionselement geöffnet hatte, stellte ich fest, dass es in Code geschrieben war, was plötzlich die Neugier des Babys weckte ., also habe ich auch versucht, eine Anmeldeseite mit Blasenhintergrund zu schreiben, der Effekt ist wie folgt:

emm... Warum sind die hochgeladenen GIF-Animationen immer so klein, um das auszugleichen Screenshot:

(Sie können sich das Bild dieser Hintergrundblasen vorstellen, die von selbst aufsteigen:schluchz:)

Sie können es mit erreichen nur ein paar einfache Codes. Solcher Effekt:

Zuerst definieren wir 10 Li-List-Tags, ich verwende das Vue-Framework:

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

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

Der Stil ist in weniger geschrieben:

.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);
      }
    }
  }

An diesem Punkt ist ein Blasenhintergrundbild fertiggestellt. Rückblickend ist es zwar nicht schwer, aber immer mehr Menschen spüren den Charme und die Kraft der CSS-Animation :relaxed:.

Verwandte Empfehlungen:

Tutorial zu Photoshop CS5-Vielfaltpinseln: Fantasy-Blasenhintergrund

So verwenden Sie den Tastenauslöser, um einen Hintergrund zu erzielen Farbblinken

Detaillierte Erläuterung von CSS zur Realisierung eines adaptiven Vollbild-Hintergrundbilds für Webseiten

Das obige ist der detaillierte Inhalt vonCSS realisiert die gemeinsame Nutzung von Hintergrundcode für dynamische Blasen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!