Cara cepat mencipta animasi pemuatan 3 mata dengan css-tutorial css-php.cn

Cara cepat mencipta animasi pemuatan 3 mata dengan css

藏色散人

Lepaskan： 2021-09-25 17:27:06

asal

3354 orang telah melayarinya

Dalam artikel sebelumnya "Bagaimana untuk membuat latar belakang beralun menggunakan CSS? 》Memperkenalkan anda cara menggunakan CSS untuk mencipta latar belakang gelombang Rakan yang memerlukan boleh membaca dan mempelajarinya~

Kemudian artikel ini akan memperkenalkan kepada anda pelaksanaan kesan yang paling biasa dalam pembangunan bahagian hadapan. process. , iaitu pelaksanaan memuatkan animasi.

Ringkasnya, sebagai contoh, pemuatan halaman web biasa memuatkan kesan menunggu... biasanya merupakan kesan pemuatan dinamik.

Sekarang saya akan memperkenalkan kepada anda kaedah yang sangat mudah dan asas untuk mencapai kesan pemuatan animasi:

Kod langsung:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: black;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .dot1, .dot2, .dot3 {
            background: #fff;
            width: 15px;
            height: 15px;
            border:double;
            border-color:black;
            border-radius: 50%;
            margin: 10px;
        }

        .dot1 {
            animation: jump 1.6s -0.32s linear infinite;
            background: #4B0082;
        }
        .dot2 {
            animation: jump 1.6s -0.16s linear infinite;
            background: #B22222;
        }
        .dot3 {
            animation: jump 1.6s linear infinite;
            background: #006400;
        }

        @keyframes jump {
            0%, 80%, 100% {
                -webkit-transform: scale(0);
                transform: scale(0);
            } 40% {
                  -webkit-transform: scale(2.0);
                  transform: scale(2.0);
              }
        }
    </style>
</head>
<body>
<div class="dot1"> </div>
<div class="dot2"></div>
<div class="dot3"></div>
</body>

</html>

Salin selepas log masuk

Kesan Seperti yang ditunjukkan di bawah:

GIF 2021-8-25 星期三下午 3-21-59.gif

Dua atribut utama diperkenalkan di bawah:

CSS3 animation (animasi) atribut

Sintaks:animation: name duration timing-function delay iteration-count direction fill-mode play-state;

值 
animation-name：指定要绑定到选择器的关键帧的名称
animation-duration：动画指定需要多少秒或毫秒完成
animation-timing-function：设置动画将如何完成一个周期
animation-delay：设置动画在启动前的延迟间隔。
animation-iteration-count：定义动画的播放次数。
animation-direction：指定是否应该轮流反向播放动画。
animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state：指定动画是否正在运行或已暂停。
initial：设置属性为其默认值。
inherit：从父元素继承属性。

Salin selepas log masuk

CSS3 @keyframes Peraturan

Boleh dibuat menggunakan peraturan @keyframes animasi. Animasi dicipta dengan menukar secara beransur-ansur dari satu tetapan gaya CSS kepada yang lain.

Semasa proses animasi, tetapan gaya CSS boleh ditukar beberapa kali. Tentukan apabila perubahan berlaku menggunakan %, atau kata kunci "dari" dan "kepada", yang sama dengan 0% hingga 100%.

0% ialah apabila animasi bermula, 100% ialah apabila animasi selesai. Untuk sokongan penyemak imbas terbaik, pemilih hendaklah sentiasa ditakrifkan sebagai 0% dan 100%.

Nota: Gunakan atribut animasi untuk mengawal penampilan animasi, dan juga gunakan pemilih untuk mengikat animasi.

Tatabahasa: @keyframes animationname {keyframes-selector {css-styles;}}

值
animationname：必需的，定义animation的名称。
keyframes-selector：必需的，动画持续时间的百分比。
合法值：
0-100%
from (和0%相同)
to (和100%相同)
注意：可以用一个动画keyframes-selectors。
css-styles：必需的，一个或多个合法的CSS样式属性。

Salin selepas log masuk

Platform tapak web Cina PHP mempunyai banyak sumber pengajaran video Selamat datang semua orang untuk mempelajari "tutorial video css 》!

Atas ialah kandungan terperinci Cara cepat mencipta animasi pemuatan 3 mata dengan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!