Ein Artikel zum schnellen Erlernen von CSS durch Animation!

Dieser Artikel gibt Ihnen eine ausführliche Analyse, wie Sie durch Animation Animationseffekte erzielen und CSS schnell lernen. Ich hoffe, dass er für alle hilfreich ist!

Da Unternehmen immer höhere Anforderungen an das Front-End stellen, wird CSS, eine der drei magischen Waffen des Front-Ends, immer komplexer. Es bringt einen gewissen Druck auf die Anfänger mit sich. CSS ist bis auf die spezifischen Attribute nicht sehr kompliziert. Das Hauptproblem besteht darin, dass es viele Wissenspunkte gibt. Nachdem ich endlich die wichtigsten Wissenspunkte gelernt hatte, schaute ich mir die Fragen im Internet an oder las die CSS-Bücher der Meister und ertrank in einem neuen Ozean.

Tatsächlich ist das menschliche Gehirn nicht gut darin, sich verstreute Wissenspunkte zu merken, aber wenn es eine logische Linie gibt, die diese Wissenspunkte verbinden kann, kann dies das Gedächtnis und die Suche des Gehirns erheblich erleichtern. Der Hinweis sollte logisch und möglichst interessant sein.

Es ist einfach so, dass CSS-Animationen ein so interessanter Hinweis sind. Sie können CSS-Eigenschaften in den Änderungen der Animation verstehen.

Zum Beispiel wissen wir, dass CSS das Attribut „border-radius“ des abgerundeten Rechtecks ​​hinzufügt. Welchen Effekt hat es also, wenn abgerundete Ecken unterschiedlicher Größe festgelegt werden? Anstatt immer wieder die Größe zu ändern, um zu experimentieren, erstellen wir eine Animation, um es auf einen Blick klar zu machen:

Wir können es auch bewegen und verformen:

Wir können es sogar im Kreis drehen lassen :

Schnelle Kenntnisse in der CSS-Animation

Bevor wir andere Attribute aneinanderreihen, wollen wir zunächst die Animation verstehen.

Das Kernwort der Animation ist „Bewegung“. Wir wollen ein paar Fragen beantworten:

• Was: Was bewegt sich?
• Wo: Wohin umziehen?
• Wann: Wann umziehen? Wie lange dauert der Umzug?
• Wie: Wie umziehen?
• Wie viel: Wie oft ziehst du um?

Die Ergebnisse dieser Fragen bilden die Bestandteile einer Animation.

Zunächst: Was ist das bewegte Thema? Es sind unsere HTML-Tags oder komplexe Komponenten, die aus Tags bestehen. Für uns ist die Hauptsache

und. Zweitens: Wohin umziehen? Dies ist die CSS-Eigenschaft, die geändert wird. Dies ist auch der Wissenspunkt des CSS, das wir zum Aneinanderreihen verwenden möchten. Drittens: Wann umziehen? Wir müssen die Dauer der Animation, die Startzeit usw. angeben. Dies ist eine rein technische Eigenschaft der Animation. Viertens: Wie bewegt man sich? Ob man sich mit konstanter Geschwindigkeit fortbewegt, beschleunigt, erst beschleunigt und dann abbremst oder eine Bézier-Kurve oder ähnliches erzeugt, das sind auch die technischen Attribute der Animation. Fünftens: Wie oft bewegen Sie sich? Ist es einmalig, mehrmals oder ständig in Bewegung? Dies ist auch ein technisches Merkmal reiner Animation.

Übergangsanimation

Lernen wir zunächst eine einfache CSS-Eigenschaftsanimation namens Übergang. Es besteht aus den oben genannten 4 Eigenschaften:

• transition-property: Geben Sie den zu ändernden CSS-Eigenschaftswert an.
• transition-duration: Animationsdauer.
• transition-timing-function: Die Geschwindigkeit der Animation.
• transition-delay : Verzögerungszeit für den Start der Animation

Sehen wir uns ein Beispiel an:

        #hellocss {
            transition-property: width;
            transition-duration: 5s;
            transition-timing-function: linear;
            transition-delay: 1s;
        }

Diese Animationsbezeichnung bedeutet, dass bei einer Breitenänderung eine Sekunde verzögert wird, um die Animation der Breitenänderung 5 Sekunden lang auszuführen. Die Änderungsrate ist gleichmäßig.

Um klar zu sehen, legen wir eine Anfangsbreite sowie eine Hintergrund- und Vordergrundfarbe fest:

    <style>
        #hellocss {
            background-color: blue;
            color: yellow;
            width: 20px;
            transition-property: width;
            transition-duration: 5s;
            transition-timing-function: linear;
            transition-delay: 1s;
        }
    </style>

Da es sich um eine Animation handelt, müssen Änderungen vorgenommen werden. Also schreiben wir zwei Javascript-Sätze:

    <script>
        function trans1(){
            let hcss1 = document.getElementById("hellocss");
            hcss1.style.width = "100px"; 
        }
    </script>

und suchen dann ein Ereignis, das diese Änderung auslöst. Zum Beispiel machen wir es, wenn die Seite geladen wird:

  
    
Hello,HTML
    
Hello,CSS
    <script>
        function trans1(){
            let hcss1 = document.getElementById("hellocss");
            hcss1.style.width = "100px"; 
        }
    </script>
  

Der vollständige Code lautet wie folgt:

  
    
    <style>
        #hellocss {
            background-color: blue;
            color: yellow;
            width: 20px;
            transition-property: width;
            transition-duration: 5s;
            transition-timing-function: linear;
            transition-delay: 1s;
        }
    </style>
  
  
    
Hello,HTML
    
Hello,CSS
    <script>
        function trans1(){
            let hcss1 = document.getElementById("hellocss");
            hcss1.style.width = "100px"; 
        }
    </script>
  

After Wenn wir kompetent sind, können wir auch Die 4 Attribute werden als eins abgekürzt:

transition: width 5s linear 1s;

Wenn es keine Verzögerung gibt, muss der vierte Punkt nicht geschrieben werden. Wenn die Leichtigkeitsmethode „Erst langsam und dann schnell“ angewendet wird, kann Punkt 3 auch weggelassen werden. Wenn das erste Element einer Änderung unterliegt, kann es als „all“ geschrieben werden. Die zweite Animationsdauer muss jedoch geschrieben werden. Wenn sie nicht geschrieben wird, ist der Standardwert 0 Sekunden und es wird nichts angezeigt.

Alle Eigenschaften, die linear berechnet werden können, können für die Animation verwendet werden. Neben leicht verständlichen Koordinatenattributen wie Breite, Höhe und Position werden in guten Szenen für Animationen häufig auch Farbattribute verwendet. Schauen wir uns einen Animationsprozess von gelbem Text auf blauem Hintergrund zu schwarzem Text auf weißem Hintergrund an:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
        #hellocss {
            background-color: blue;
            color: yellow;
            transition: all 10s linear 1s;
        }
    </style>
  </head>
  <body onload="trans1()">
    <div>Hello,HTML</div>
    <div id="hellocss">Hello,CSS</div>
    <script>
        function trans1(){
            let hcss1 = document.getElementById("hellocss");
            hcss1.style.backgroundColor = "white";
            hcss1.style.color="red"; 
        }
    </script>
  </body>
</html>

Keyframes-Animation

Der obige Übergang ist relativ einfach, zum Beispiel wie viele Male in einer Schleife oder Änderung. Wenn wir es in der Vergangenheit zurücksetzen oder zwischendurch mehrmals ändern müssen, müssen wir weitere Attribute angeben. Diese Anforderungen werden durch Keyframes-Animationen erfüllt.

Der Vorteil der Keyframes-Animation besteht darin, dass der Startpunkt und der Endpunkt in Keyframes angegeben werden. Es ist nicht erforderlich, Ereignisse zu schreiben, um sie zu ändern:

        @keyframes color_change{
            from {
                background-color: blue;
                color: yellow;
            }
            to {
                background-color: white;
                color: black;
            }
        }

然后我们在一个css选择器里面去引用定义好的keyframes动画，同时指定动画时长、变化曲线和延时：

        #hellocss {
            animation-name: color_change;
            animation-duration: 10s;
            animation-timing-function: linear;
            animation-delay: 1s;
        }

到了keyframes动画，我们终于可以指定播放多少次了，比如连播三次：

        #hellocss {
            animation-name: color_change;
            animation-duration: 10s;
            animation-timing-function: linear;
            animation-delay: 1s;
            animation-iteration-count: 3;
        }

甚至可以无限性地播放下去:

animation-iteration-count: infinite;

光循环播还不过瘾，我们还想先正着变，然后再变回来，我们可以将方向设为交替播放：

animation-direction: alternate;

把上面的综合在一起，大家跑起来看看：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      @keyframes color_change {
        from {
          background-color: blue;
          color: yellow;
        }
        to {
          background-color: white;
          color: black;
        }
      }
      #hellocss {
        animation-name: color_change;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-delay: 1s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
    </style>
  </head>
  <body>
    <div>Hello,HTML</div>
    <div id="hellocss">Hello,CSS</div>
  </body>
</html>

而其实呢，from和to，分别是0%和100%的别名，也可以这么写：

      @keyframes color_change {
        0% {
          background-color: blue;
          color: yellow;
        }
        100% {
          background-color: white;
          color: black;
        }
      }

这样我们可以增加百分比，让变化变得更有趣一些:

      @keyframes color_change {
        0% {
          background-color: blue;
          color: yellow;
        }
        50% {
          background-color: yellowgreen;
          color: red;
        }
        100% {
          background-color: white;
          color: black;
        }
      }

最后，如果想让动画播放暂停怎么办? 我们可以通过修改animationPlayState属性为paused来实现，比如我们让点击第一个div来实现暂停功能：

  <body>
    <div onclick="trans1()">Hello,HTML</div>
    <div id="hellocss">Hello,CSS</div>
    <script>
      function trans1() {
        let hcss1 = document.getElementById("hellocss");
        hcss1.style.animationPlayState = "paused";
      }
    </script>
  </body>

通过动画形象理解css属性

变形 - 圆角矩形

我们现在终于可以看看开篇时的第一个动画是如何写成的了：

      @keyframes color_change {
        0% {
          background-color: blue;
          color: yellow;
          border-radius: 0px;
        }
        50% {
          background-color: yellowgreen;
          color: red;
        }
        100% {
          background-color: palegoldenrod;
          color: black;
          border-radius: 100px;
        }
      }

平面移动：transform:translate属性

最简单的平移方式就是使用transform:translate属性。比如我们开篇的第二个动画：

我们先让变色的圆角矩形向下移100px，然后再右移100px:

            0% {
                background-color: blue;
                color: yellow;
                border-radius: 0px;
                transform:translate(0px,0px)
            }
            50% {
                background-color: yellowgreen;
                color: red;
                transform:translate(0px,100px)
            }
            100% {
                background-color: palegoldenrod;
                color: black;
                border-radius: 100px;
                transform:translate(100px,100px)
            }
        }

旋转：transform:rotate属性

最后我们看旋转属性。

        @keyframes color_change{
            0% {
                background-color: blue;
                color: yellow;
                border-radius: 0px;
                transform:translate(0px,0px);
                transform:rotate(0deg);
            }
            50% {
                background-color: yellowgreen;
                color: red;
                transform:translate(0px,100px);
                transform:rotate(90deg);
            }
            100% {
                background-color: palegoldenrod;
                color: black;
                border-radius: 100px;
                transform:translate(100px,100px);
                transform:rotate(180deg);
            }
        }

通过动画学习盒子模型

让我们回归基础，通过动画来了解盒子模型。

所谓盒子，最基础的就是宽和高。 这没啥可说的，来个宽高动画先体验一下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
        @keyframes box_change {
            0% {
                height: 50px;
                width: 50px;
            }
            50% {
                height: 200px;
                width: 50px;
            }
            100% {
                height: 200px;
                width: 200px;
            }
        }
        .box1 {
            background-color: blue;
            color: yellow;
            opacity: 0.65;
            animation-name: box_change;
            animation-duration: 10s;
            animation-delay: 1s;
            animation-timing-function: ease;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }
    </style>
  </head>
  <body>
      <div class="box1">Hello Box</div>
  </body>
</html>

除了宽高之外，盒子有边框，边框内部有padding，边框外面还有margin。

包括边框在内，都分为top, bottom, left, right四个方向：

        border-width: 5px;
        border-top-color: #f5222d;
        border-bottom-color: #cf1322;
        border-left-color: #a8071a;
        border-right-color: #820014;
        padding: 10px;
        margin: 15px;

我们现在给边框加上颜色和形状，带着margin和padding动起来看看效果：

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      @keyframes box_change {
        0% {
          height: 50px;
          width: 50px;
          border-style: solid;
        }
        50% {
          height: 200px;
          width: 50px;
          border-style: dotted;
        }
        100% {
          height: 200px;
          width: 200px;
          border-style: dashed;
        }
      }
      .box1 {
        background-color: blue;
        color: yellow;
        border-width: 5px;
        border-top-color: #f5222d;
        border-bottom-color: #cf1322;
        border-left-color: #a8071a;
        border-right-color: #820014;
        padding: 10px;
        margin: 15px;
        animation-name: box_change;
        animation-duration: 10s;
        animation-delay: 1s;
        animation-timing-function: ease;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
    </style>
  </head>
  <body>
    <div class="box1">Hello Box</div>
  </body>
</html>

打开chrome的开发者工具，我们可以更清楚地看清content, padding, border, margin, 之间的关系：

Border取5px只是为了让其更容易被识别，但是太丑了，我们将其改为2px。效果就好得多了：

（学习视频分享：css视频教程）

Das obige ist der detaillierte Inhalt vonEin Artikel zum schnellen Erlernen von CSS durch Animation!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!