css3 は単純な読み込みを実装しますanimation_html/css_WEB-ITnose-htmlチュートリアル-php.cn

css3 は単純な読み込みを実装しますanimation_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:23:32

オリジナル

1191 人が閲覧しました

css3 は非常に人気があり、私はまだ css2 を非常に冷静にかじっています (ダン) と (テン) とても恥ずかしい思いをしています

私は週末に時間をかけてローディング効果の実装を調べました。 css3 の利点が見え始めました。大きくうなずきますが、標準がリリースされるたびに新しい言語を学習しているような気がして、少し怖いです。。。

ナンセンスな話はもう十分です... コードの表示を開始しましょう

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>loading动画实现</title></head><style type="text/css">    body{        text-align:center;    }    .container{        display: inline-block;    }    .point{        width:10px;        height:10px;        background:#2196F3;        border-radius:50%;        float:left;        margin-left:5px;        animation:myAnima 1.2s ease-in-out infinite;     }    .two{        animation-delay: 200ms;    }    .three{        animation-delay: 400ms;    }    @keyframes myAnima{        from {opacity: 0.8}        to{opacity: 0}    }</style><body><div class="container">    <div class="point one"></div>        <div class="point two"></div>        <div class="point three"></div>    </div></body></html>

ログイン後にコピー

レンダリング:

主に使用される: CSS のアニメーション属性

アニメーション属性は、6 つのアニメーション属性を設定するために使用される略語属性です:

animation- name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

実装アイデア:

まず、3つの点が必要です、ここで渡します 3つの正方形を定義しますこれを達成するには、角の丸みを 50% に設定します。