Artikel untuk mempelajari css dengan cepat melalui animasi!

Artikel ini akan memberi anda analisis mendalam tentang cara mencapai kesan animasi dan cepat belajar css melalui animasi. Saya harap ia akan membantu semua orang!

Memandangkan perniagaan menuntut semakin banyak untuk bahagian hadapan, CSS, salah satu daripada tiga senjata ajaib bahagian hadapan, menjadi semakin kompleks. Ia membawa tekanan tertentu kepada pelajar pemula. CSS tidak terlalu rumit hingga ke atribut khusus Masalah utama ialah terdapat banyak mata pengetahuan. Selepas akhirnya mempelajari mata pengetahuan utama, saya melihat soalan-soalan di Internet atau membaca buku CSS yang ditulis oleh para sarjana, dan saya lemas di lautan baru.

Sebenarnya otak manusia tidak pandai menghafal titik-titik ilmu yang berselerak, tetapi jika ada garisan logik yang boleh menghubungkan titik-titik ilmu ini, ia dapat memudahkan daya ingatan dan pencarian otak. Petunjuk harus logik dan lebih baik menarik.

Kebetulan animasi CSS adalah petunjuk yang menarik Anda boleh memahami sifat CSS dalam perubahan animasi.

Sebagai contoh, kita tahu bahawa CSS menambah atribut jejari sempadan bagi segi empat tepat bulat, jadi apakah kesan menetapkan sudut bulat dengan saiz yang berbeza? Daripada menukar saiz berulang kali untuk bereksperimen, kita boleh membuat animasi untuk menjadikannya jelas sepintas lalu:

Kami juga boleh membuatnya bergerak dan berubah bentuk:

Kita juga boleh membuatnya berputar:

Literasi pantas pada animasi CSS

Sebelum menyusun yang lain atribut, kita Mari kita fahami animasi dahulu.

Kata kunci teras animasi ialah "pergerakan". Kami ingin menjawab beberapa soalan:

• Apa: Apa yang bergerak?
• Di mana: Ke mana hendak berpindah?
• Bila: Bila hendak berpindah? Berapa lama masa yang diambil untuk bergerak?
• Bagaimana: Bagaimana hendak bergerak?
• Berapa banyak: Berapa kali?

Hasil soalan ini membentuk komponen animasi.

Pertama sekali, apakah subjek yang bergerak? Ia adalah teg HTML kami, atau komponen kompleks yang terdiri daripada teg. Bagi kami, yang utama ialah

dan. Kedua, ke mana hendak berpindah? Ini adalah sifat css yang sedang diubah. Ini juga merupakan titik pengetahuan css yang ingin kami gunakan untuk menyusun bersama. Ketiga, bila hendak bergerak? Kita perlu menentukan tempoh animasi, masa mula, dsb. Ini adalah sifat teknikal semata-mata animasi. Keempat, bagaimana untuk bergerak? Sama ada untuk bergerak pada kelajuan malar, untuk memecut, untuk memecut dahulu dan kemudian nyahpecutan, atau untuk mencipta lengkung Bezier atau sesuatu seperti itu, ini juga merupakan sifat teknikal animasi. Kelima, berapa kali anda bergerak? Adakah sekali, beberapa kali, atau terus bergerak? Ini juga merupakan sifat teknikal animasi tulen.

Animasi peralihan

Mari kita pelajari animasi sifat CSS ringkas yang dipanggil peralihan dahulu. Ia terdiri daripada 4 sifat di atas:

• sifat peralihan: Tentukan nilai atribut css yang hendak ditukar
• tempoh peralihan: tempoh animasi
• peralihan - fungsi pemasaan: Perubahan kelajuan animasi
• penangguhan peralihan: Masa kelewatan animasi bermula

Mari kita lihat contoh:

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

Ini Spesifikasi animasi bermakna jika lebar berubah, animasi perubahan lebar akan dijalankan selama 5 saat dengan kelewatan selama satu saat. Kadar perubahan adalah seragam.

Untuk melihat dengan jelas, kami menetapkan lebar awal, ditambah dengan warna latar belakang dan warna latar depan:

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

Memandangkan ia adalah animasi, mesti ada perubahan. Jadi kami menulis dua ayat javascript:

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

dan kemudian cari peristiwa untuk mencetuskan perubahan ini Sebagai contoh, kami melakukannya apabila halaman dimuatkan:

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

.

Kod lengkap adalah seperti berikut:

  
    
    <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>
  

Selepas mahir, kita juga boleh meringkaskan empat atribut menjadi satu:

transition: width 5s linear 1s;

Jika tiada kelewatan , item keempat boleh diabaikan Tulis. Jika anda menggunakan kaedah mudah lambat dahulu dan kemudian cepat, item 3 juga boleh ditinggalkan. Jika item pertama tertakluk kepada sebarang perubahan, ia boleh ditulis sebagai semua. Tetapi tempoh animasi kedua mesti ditulis Jika tidak ditulis, lalai ialah 0 saat, dan tidak akan ada apa-apa.

Semua sifat yang boleh dikira secara linear boleh digunakan untuk animasi. Selain atribut koordinat yang mudah difahami seperti lebar, ketinggian dan kedudukan, atribut warna juga sering digunakan dalam adegan yang baik untuk animasi. Mari kita lihat proses animasi daripada teks kuning pada latar belakang biru kepada teks hitam pada latar belakang putih:

<!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>

animasi bingkai kunci

Peralihan di atas agak mudah Contohnya, berapa kali kita perlu mengulung, atau menukar ke masa lalu dan kemudian kembali semula, atau berapa kali untuk menukar di tengah, dsb., kita perlu menentukan lebih banyak harta. Keperluan ini dipenuhi oleh animasi bingkai utama.

Kelebihan animasi bingkai utama ialah titik permulaan dan titik penamat ditentukan dalam bingkai utama. Tidak perlu menulis peristiwa untuk mengubahnya. Semuanya dilakukan dalam css:

        @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视频教程）

Atas ialah kandungan terperinci Artikel untuk mempelajari css dengan cepat melalui animasi!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!