ホームページ > ウェブフロントエンド > CSSチュートリアル > Pure CSS3 は、境界線の影が外側に広がるアニメーション特殊効果を作成します。

Pure CSS3 は、境界線の影が外側に広がるアニメーション特殊効果を作成します。

青灯夜游
リリース: 2021-08-30 09:50:39
オリジナル
6190 人が閲覧しました

前の記事「CSS3 を使用してボタンのホバリングと点滅の動的効果を実装する方法を段階的に説明します」では、CSS3 を使用してボタンに動的効果を追加し、ボタンのホバリングと点滅する影のアニメーション効果です。ご興味があれば、それについて学ぶことができます~

今日は、この記事では境界線のアニメーション効果を紹介します。CSS3 を使用してアニメーション効果を実現する方法を見てみましょう外側に広がる境界線の影。

最初にレンダリングを見てみましょう:

Pure CSS3 は、境界線の影が外側に広がるアニメーション特殊効果を作成します。

この効果を実現する方法を検討してみましょう:

まず、 HTML パーツ では、テキスト <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;div id=&quot;box&quot;&gt; 编程是为那些有不同想法的人准备的。。。&lt;br /&gt; 对于那些想要创造伟大事物并愿意改变世界的人。 &lt;/div&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>

Pure CSS3 は、境界線の影が外側に広がるアニメーション特殊効果を作成します。

を含む

div コンテナを定義し、変更 ## 用の CSS スタイルの定義を開始します。 #: レイアウト スタイル、背景色、div の中心揃え、フォントの色を調整します。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

body {

    display: flex;

    align-items: center;

    justify-content: center;

    height: 100vh;

    background: #00ac69;

}

#box {

    font-family: Arial;

    font-size: 18px;

    line-height: 30px;

    font-weight: bold;

    color: white;

    border: 2px solid;

    padding: 15px;

}

ログイン後にコピー

Pure CSS3 は、境界線の影が外側に広がるアニメーション特殊効果を作成します。

直角は見栄えがよくありません。border-radius を使用して 4 つの角を揃えることができます境界線の角を丸く設定します

1

2

3

#box {

    border-radius: 10px;

}

ログイン後にコピー

Pure CSS3 は、境界線の影が外側に広がるアニメーション特殊効果を作成します。

##以下は最も重要で、外側に広がる影のアニメーション効果を作成します:

アニメーションと @ を使用します。達成するキーフレーム

    最初にアニメーションを #box 要素にバインドし、animation 属性を使用して @keyframes アニメーションの名前を指定し、アニメーションの完了にかかる時間を設定し、アニメーションのスピードカーブ。
  • 1

    2

    3

    #box {

        animation: animated-border 1.5s infinite;

    }

    ログイン後にコピー
    次に、@keyframes を使用してアニメーションの各フレームのアクションを設定します。
  • ここからアニメーションの設定が開始されます (0%) {} )、border-shadow は

    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);

    ; アニメーションが完了すると (100%{})、border-shadow は影は box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); となり、影の距離が大きくなり、色が透明になります。

    1

    2

    3

    4

    5

    6

    7

    8

    9

    @keyframes animated-border {

        0% {

            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);

        }

     

        100% {

            box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);

        }

    }

    ログイン後にコピー
    ログイン後にコピー

Pure CSS3 は、境界線の影が外側に広がるアニメーション特殊効果を作成します。OK、完了です。完全なコードは以下に添付されています:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <style type="text/css">

            body {

                display: flex;

                align-items: center;

                justify-content: center;

                height: 100vh;

                background: #00ac69;

            }

 

            #box {

                font-family: Arial;

                font-size: 18px;

                line-height: 30px;

                font-weight: bold;

                color: white;

                border: 2px solid;

                padding: 15px;

                border-radius: 10px;

                animation: animated-border 1.5s infinite;

            }

 

            @keyframes animated-border {

                0% {

                    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);

                }

 

                100% {

                    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);

                }

            }

        </style>

    </head>

    <body>

        <div id="box">

            编程是为那些有不同想法的人准备的。。。<br />

            对于那些想要创造伟大事物并愿意改变世界的人。

        </div>

    </body>

</html>

ログイン後にコピー

最後に、主要な属性

animation

@keyframes を紹介します:

    animation プロパティは、単一の宣言で複数のアニメーション プロパティを設定できる短縮プロパティです:
  • 1

    2

    3

    4

    5

    6

    7

    8

    animation-name:指定要绑定到选择器的关键帧的名称

    animation-duration:动画指定需要多少秒或毫秒完成

    animation-timing-function:设置动画将如何完成一个周期

    animation-delay:设置动画在启动前的延迟间隔。

    animation-iteration-count:定义动画的播放次数。

    animation-direction:指定是否应该轮流反向播放动画。

    animation-fill-mode:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。

    animation-play-state:指定动画是否正在运行或已暂停。

    ログイン後にコピー
  • @keyframes

    ルールが使用されますCSS アニメーションを定義するには 周期的な動作。単純なアニメーション効果を作成するには、アニメーション属性と一緒に使用する必要があります。

  • @keyframe ルールは、キーワード「@keyframe」、その後にアニメーションの名前を指定する識別子 (アニメーション名を使用して参照されます)、その後に続く一連のパラメータで構成されます。スタイル ルール (中括弧で区切られています)。次に、アニメーション名属性の値として識別子を使用して、アニメーションが要素に適用されます。例:

1

2

3

4

5

6

7

8

9

10

/* 定义动画*/

@keyframes 动画名称{

    /* 样式规则*/

}

/* 将它应用于元素 */

.element {

    animation-name: 动画名称(在@keyframes中已经声明好的);

    /* 或使用动画简写属性*/

    animation: 动画名称 1s ...

}

ログイン後にコピー

@keyframes ルールの中括弧内で、アニメーション中の特定のポイントでアニメーション化されるプロパティの値を指定するキーフレームまたはウェイポイントを定義する必要があります。これにより、アニメーション シーケンスの中間ステップを制御できるようになります。たとえば、上記の例では:

1

2

3

4

5

6

7

8

9

@keyframes animated-border {

    0% {

        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);

    }

 

    100% {

        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);

    }

}

ログイン後にコピー
ログイン後にコピー

PHP 中国語 Web サイト プラットフォームには、多くのビデオ教育リソースがあります。誰もが「

css ビデオ チュートリアル

」を学習することを歓迎します。

以上がPure CSS3 は、境界線の影が外側に広がるアニメーション特殊効果を作成します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート