コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > CSSの知識まとめ (9)

CSSの知識まとめ (9)

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース： 2016-08-18 08:57:58
オリジナル
1275 人が閲覧しました

一般的な CSS スタイル

10. カスタムアニメーション

1)キーフレーム（キーフレーム）

キーフレームと呼ばれるもので、Flashのキーフレームに似ています。

CSS3では、主に「@keyframes」で始まり、その後にアニメーション名と中括弧のペア「{...}」が続きます。括弧内には、さまざまな期間のスタイルルールがいくつかあります。

構文: @keyframes アニメーション名 {keyframes-selector {css-styles;}}

animationname:アニメーションの名前を定義します。

keyframes-selector: 変更が発生する時間をパーセンテージで指定するか、0%と100%に相当するキーワード「from」と「to」を使用して指定します。 percentageセレクターを定義することをお勧めします。

css-styles: @keyframes ルールを使用すると、ある CSS スタイルのセットを別のスタイルのセットに徐々に変更するアニメーションを作成したり、この CSS スタイルのセットを複数回変更したりできます。

互換性: 現在、ブラウザーは @keyframes ルールをサポートしていないため、接頭辞「-moz-」、「-o-」、「-webkit-」を追加する必要があります。

例:

リーリー

2)アニメ名(animation-name)

アニメーション名は @keyframes によって定義されるため、要素に適用されるアニメーション名はルール @keyframes と組み合わせて使用​​する必要があります。

アニメーション名: なし

<識別子>: アニメーション名が複数ある場合は、カンマで区切って定義します。

例:

リーリー

3)アニメーション時間(animation-duration)

オブジェクトアニメーションの継続時間を指定します

animation-duration：

ソースコード例:

リーリー
リーリー

効果:

F5 を押してアニメーションを更新してください (長方形は 3 秒で右に 500 ピクセル移動します)

 

 　　4）动画的过渡速度（animation-timing-function）

　　　　animation-timing-function : ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)

　　　　①ease : 默认值，逐渐变慢(等于 cubic-bezier(0.25,0.1,0.25,1))

　　　　②linear : 匀速过渡效果(等于 cubic-bezier(0,0,1,1))

　　　　③ease-in : 加速的过渡效果(等于 cubic-bezier(0.42,0,1,1))

　　　　④ease-out : 减速的过渡效果(等于 cubic-bezier(0,0,0.58,1))

　　　　⑤ease-in-out : 加速然后减速(等于cubic-bezier (0.42, 0, 0.58, 1))

　　　　⑥cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值，可能的值是 0 至 1 之间的数值。

　　例子 源代码：

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

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

.function</span>{<span style="color: #ff0000;">

    width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">

    height</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">

    background</span>:<span style="color: #0000ff;">#ccc</span>;<span style="color: #ff0000;">

    position</span>:<span style="color: #0000ff;">relative</span>;<span style="color: #ff0000;">

    margin</span>:<span style="color: #0000ff;">5px</span>;<span style="color: #ff0000;">

    -webkit-animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">

    -webkit-animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">

    -moz-animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">

    -moz-animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">

    animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">

    animation-duration</span>:<span style="color: #0000ff;">3s</span>;

}<span style="color: #800000;">

.ease-in</span>{<span style="color: #ff0000;">

    -webkit-animation-timing-function</span>:<span style="color: #0000ff;">ease-in</span>;<span style="color: #ff0000;">

    -moz-animation-timing-function</span>:<span style="color: #0000ff;">ease-in</span>;<span style="color: #ff0000;">

    animation-timing-function</span>:<span style="color: #0000ff;">ease-in</span>;

}<span style="color: #800000;">

.ease-out</span>{<span style="color: #ff0000;">

    -webkit-animation-timing-function</span>:<span style="color: #0000ff;">ease-out</span>;<span style="color: #ff0000;">

    -moz-animation-timing-function</span>:<span style="color: #0000ff;">ease-out</span>;<span style="color: #ff0000;">

    animation-timing-function</span>:<span style="color: #0000ff;">ease-out</span>;

}<span style="color: #800000;">

@-webkit-keyframes FromLeftToRight</span>{<span style="color: #ff0000;">

    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">

    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;">

}

@-moz-keyframes FromLeftToRight</span>{<span style="color: #ff0000;">

    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">

    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;">

}

@keyframes FromLeftToRight</span>{<span style="color: #ff0000;">

    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">

    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;">

}</span>

ログイン後にコピー

1

2

3

4

5

6

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>

<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>请按F5刷新动画（两个矩形同样在3秒用不同的速率向右移动500px）<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="function ease-in"</span><span style="color: #0000ff;">></span>ease-in<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="function ease-out"</span><span style="color: #0000ff;">></span>ease-out<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

ログイン後にコピー

　　效果：

请按F5刷新动画（两个矩形同样在3秒用不同的速率向右移动500px）

ease-in
ease-out

 

　　5）动画延迟时间（animation-delay）

 　　　　指定对象动画延迟的时间

 　　　　animation-delay：

 　　例子 源代码：

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

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

.delay</span>{<span style="color: #ff0000;">

    width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">

    height</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">

    background</span>:<span style="color: #0000ff;">#000</span>;<span style="color: #ff0000;">

    position</span>:<span style="color: #0000ff;">relative</span>;<span style="color: #ff0000;">

    -webkit-animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">

    -webkit-animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">

    -webkit-animation-delay</span>:<span style="color: #0000ff;">2s</span>;<span style="color: #ff0000;">

    -moz-animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">

    -moz-animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">

    -moz-animation-delay</span>:<span style="color: #0000ff;">2s</span>;<span style="color: #ff0000;">

    animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">

    animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">

    animation-delay</span>:<span style="color: #0000ff;">2s</span>;

}<span style="color: #800000;">

@-webkit-keyframes FromLeftToRight</span>{<span style="color: #ff0000;">

    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">

    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;">

}

@-moz-keyframes FromLeftToRight</span>{<span style="color: #ff0000;">

    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">

    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;">

}

@keyframes FromLeftToRight</span>{<span style="color: #ff0000;">

    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">

    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;">

}</span>

ログイン後にコピー

1

2

3

4

5

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>

<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>请按F5刷新动画（刷新后请等待2秒启动动画）<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="delay"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

ログイン後にコピー

　　效果：

请按F5刷新动画（刷新后请等待2秒启动动画）

 

 

 　　6）动画执行次数（animation-iteration-count）

　　　　animation-iteration-count：infinite | 

　　　　infinite表示无限次数，number指定循环次数。

　　例子 源代码：

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

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

.infinite</span>{<span style="color: #ff0000;">

    width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">

    height</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">

    background</span>:<span style="color: #0000ff;">#000</span>;<span style="color: #ff0000;">

    position</span>:<span style="color: #0000ff;">relative</span>;<span style="color: #ff0000;">

    -webkit-animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">

    -webkit-animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">

    -webkit-animation-iteration-count</span>:<span style="color: #0000ff;">infinite</span>;<span style="color: #ff0000;">

    -moz-animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">

    -moz-animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">

    -moz-animation-iteration-count</span>:<span style="color: #0000ff;">infinite</span>;<span style="color: #ff0000;">

    animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">

    animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">

    animation-iteration-count</span>:<span style="color: #0000ff;">infinite</span>;

}<span style="color: #800000;">

@-webkit-keyframes FromLeftToRight</span>{<span style="color: #ff0000;">

    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">

    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;">

}

@-moz-keyframes FromLeftToRight</span>{<span style="color: #ff0000;">

    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">

    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;">

}

@keyframes FromLeftToRight</span>{<span style="color: #ff0000;">

    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">

    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;">

}</span>

ログイン後にコピー

1

2

3

4

5

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>

<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>动画全自动无限循环播放<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="infinite"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

ログイン後にコピー

　　效果：

动画全自动无限循环播放

 

 

 

 　　7）动画的顺序（animation-direction）

 　　　　设置对象动画在循环中是否反向运动

　　　　animation-direction : normal | reverse | alternate | alternate-reverse

　　　　normal：正常方向

　　　　reverse：反方向运行

　　　　alternate：动画先正常运行再反方向运行，并持续交替运行

　　　　alternate-reverse：动画先反运行再正方向运行，并持续交替运行

 　　例子 源代码：

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

44

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

.box</span>{<span style="color: #ff0000;">

    width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">

    height</span>:<span style="color: #0000ff;">50px</span>;<span style="color: #ff0000;">

    background</span>:<span style="color: #0000ff;">#ccc</span>;<span style="color: #ff0000;">

    margin</span>:<span style="color: #0000ff;">5px</span>;<span style="color: #ff0000;">

    position</span>:<span style="color: #0000ff;">relative</span>;<span style="color: #ff0000;">

    -webkit-animation-name</span>:<span style="color: #0000ff;">FormLeftToRight</span>;<span style="color: #ff0000;">

    -moz-animation-name</span>:<span style="color: #0000ff;">FormLeftToRight</span>;<span style="color: #ff0000;">

    animation-name</span>:<span style="color: #0000ff;">FormLeftToRight</span>;<span style="color: #ff0000;">

    -webkit-animation-duration</span>:<span style="color: #0000ff;">5s</span>;<span style="color: #ff0000;">

    -moz-animation-duration</span>:<span style="color: #0000ff;">5s</span>;<span style="color: #ff0000;">

    animation-duration</span>:<span style="color: #0000ff;">5s</span>;<span style="color: #ff0000;">

    -webkit-animation-iteration-count</span>:<span style="color: #0000ff;">infinite</span>;<span style="color: #ff0000;">

    -moz-animation-iteration-count</span>:<span style="color: #0000ff;">infinite</span>;<span style="color: #ff0000;">

    animation-iteration-count</span>:<span style="color: #0000ff;">infinite</span>;

}<span style="color: #800000;">

.reverse</span>{<span style="color: #ff0000;">

    -webkit-animation-direction</span>:<span style="color: #0000ff;">reverse</span>;<span style="color: #ff0000;">

    -moz-animation-direction</span>:<span style="color: #0000ff;">reverse</span>;<span style="color: #ff0000;">

    animation-direction</span>:<span style="color: #0000ff;">reverse</span>;

}<span style="color: #800000;">

.alternate</span>{<span style="color: #ff0000;">

    -webkit-animation-direction</span>:<span style="color: #0000ff;">alternate</span>;<span style="color: #ff0000;">

    -moz-animation-direction</span>:<span style="color: #0000ff;">alternate</span>;<span style="color: #ff0000;">

    animation-direction</span>:<span style="color: #0000ff;">alternate</span>;

}<span style="color: #800000;">

.alternate-reverse</span>{<span style="color: #ff0000;">

    -webkit-animation-direction</span>:<span style="color: #0000ff;">alternate-reverse</span>;<span style="color: #ff0000;">

    -moz-animation-direction</span>:<span style="color: #0000ff;">alternate-reverse</span>;<span style="color: #ff0000;">

    animation-direction</span>:<span style="color: #0000ff;">alternate-reverse</span>;

}<span style="color: #800000;">

@-webkit-keyframes FormLeftToRight</span>{<span style="color: #ff0000;">

    0%{left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">

    100%</span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;">

}

@-moz-keyframes FormLeftToRight</span>{<span style="color: #ff0000;">

    0%{left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">

    100%</span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;">

}

@keyframes FormLeftToRight</span>{<span style="color: #ff0000;">

    0%{left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">

    100%</span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;">

}</span>

ログイン後にコピー

 

1

2

3

4

5

6

7

8

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>

<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>四种不同的顺序<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span>normal<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box reverse"</span><span style="color: #0000ff;">></span>reverse<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box alternate"</span><span style="color: #0000ff;">></span>alternate<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box alternate-reverse"</span><span style="color: #0000ff;">></span>alternate-reverse<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

ログイン後にコピー

　　效果：

四种不同的顺序

normal
reverse
alternate
alternate-reverse

 

 

 　　8）动画的状态（animation-play-state）

　　　　设置对象动画的状态

　　　　animation-play-state：running | paused

　　　　running：运动

　　　　paused：暂停

 

 　　例子 源代码：

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

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

.state</span>{<span style="color: #ff0000;">

    width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">

    height</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">

    background</span>:<span style="color: #0000ff;">#000</span>;<span style="color: #ff0000;">

    position</span>:<span style="color: #0000ff;">relative</span>;<span style="color: #ff0000;">

    -webkit-animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">

    -webkit-animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">

    -webkit-animation-iteration-count</span>:<span style="color: #0000ff;">infinite</span>;<span style="color: #ff0000;">

    -moz-animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">

    -moz-animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">

    -moz-animation-iteration-count</span>:<span style="color: #0000ff;">infinite</span>;<span style="color: #ff0000;">

    animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">

    animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">

    animation-iteration-count</span>:<span style="color: #0000ff;">infinite</span>;

}<span style="color: #800000;">

.state:hover</span>{<span style="color: #ff0000;">

    -webkit-animation-play-state</span>:<span style="color: #0000ff;">paused</span>;<span style="color: #ff0000;">

    -moz-animation-play-state</span>:<span style="color: #0000ff;">paused</span>;<span style="color: #ff0000;">

    animation-play-state</span>:<span style="color: #0000ff;">paused</span>;

}<span style="color: #800000;">

@-webkit-keyframes FromLeftToRight</span>{<span style="color: #ff0000;">

    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">

    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;">

}

@-moz-keyframes FromLeftToRight</span>{<span style="color: #ff0000;">

    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">

    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;">

}

@keyframes FromLeftToRight</span>{<span style="color: #ff0000;">

    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">

    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;">

}</span>

ログイン後にコピー

1

2

3

4

5

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>

<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>鼠标移动到矩形上可以暂停动画<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="state"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

ログイン後にコピー

　　效果：

鼠标移动到矩形上可以暂停动画

 

 

 

 

 　　9）动画时间之外的状态（animation-fill-mode）

　　　　设置对象动画时间之外的状态

　　　　animation-fill-mode ： none | forwards | backwards | both

　　　　none：默认值。不设置对象动画之外的状态

　　　　forwards：设置对象状态为动画结束时的状态

　　　　backwards：设置对象状态为动画开始时的状态

　　　　both：设置对象状态为动画结束或开始的状态

 　　例子 源代码：

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

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

.mode</span>{<span style="color: #ff0000;">

    width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">

    height</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">

    background</span>:<span style="color: #0000ff;">#000</span>;<span style="color: #ff0000;">

    position</span>:<span style="color: #0000ff;">relative</span>;<span style="color: #ff0000;">

    -webkit-animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">

    -webkit-animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">

    -webkit-animation-fill-mode</span>:<span style="color: #0000ff;">forwards</span>;<span style="color: #ff0000;">

    -moz-animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">

    -moz-animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">

    -moz-animation-fill-mode</span>:<span style="color: #0000ff;">forwards</span>;<span style="color: #ff0000;">

    animation-name</span>:<span style="color: #0000ff;">FromLeftToRight</span>;<span style="color: #ff0000;">

    animation-duration</span>:<span style="color: #0000ff;">3s</span>;<span style="color: #ff0000;">

    animation-fill-mode</span>:<span style="color: #0000ff;">forwards</span>;

}<span style="color: #800000;">

@-webkit-keyframes FromLeftToRight</span>{<span style="color: #ff0000;">

    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">

    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;">

}

@-moz-keyframes FromLeftToRight</span>{<span style="color: #ff0000;">

    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">

    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;">

}

@keyframes FromLeftToRight</span>{<span style="color: #ff0000;">

    0% {left</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">

    100% </span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">500px</span>;}<span style="color: #800000;">

}</span>

ログイン後にコピー

1

2

3

4

5

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>

<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>请按F5刷新动画（动画结束后停在结束位置）<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="mode"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

ログイン後にコピー

　　效果：

请按F5刷新动画（动画结束后停在结束位置）

 

 

 　　10）动画复合属性（animation）

 　　　　通过 animation ，我们能够创建自定义动画，这可以在许多网页中取代动画图片gif、Flash 动画以及 JavaScript。

　　　　animation： || || || || || || || [ ,*]

 　　　　

　　利用学过的动画样式，制作一个下滑菜单栏

　　源代码：

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

44

45

46

47

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

.dropmenu</span>{<span style="color: #ff0000;">

    width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">

    height</span>:<span style="color: #0000ff;">30px</span>;<span style="color: #ff0000;">

    line-height</span>:<span style="color: #0000ff;">30px</span>;<span style="color: #ff0000;">

    text-align</span>:<span style="color: #0000ff;">center</span>;<span style="color: #ff0000;">

    background</span>:<span style="color: #0000ff;">green</span>;<span style="color: #ff0000;">

    border-radius</span>:<span style="color: #0000ff;">10px</span>;<span style="color: #ff0000;">

    overflow</span>:<span style="color: #0000ff;">hidden</span>;

}<span style="color: #800000;">

.dropmenu a</span>{<span style="color: #ff0000;">

    font-family</span>:<span style="color: #0000ff;">"微软雅黑"</span>;<span style="color: #ff0000;">

    font-size</span>:<span style="color: #0000ff;">18px</span>;<span style="color: #ff0000;">

    color</span>:<span style="color: #0000ff;">#fff</span>;<span style="color: #ff0000;">

    text-decoration</span>:<span style="color: #0000ff;">none</span>;

}<span style="color: #800000;">

.dropmenu ul</span>{<span style="color: #ff0000;">

    list-style-type</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">

    padding</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">

    margin</span>:<span style="color: #0000ff;">0</span>;

}<span style="color: #800000;">

.dropmenu ul li</span>{<span style="color: #ff0000;">

    background</span>:<span style="color: #0000ff;">#808080</span>;

}<span style="color: #800000;">

.dropmenu:hover</span>{<span style="color: #ff0000;">

    -webkit-animation-name</span>:<span style="color: #0000ff;">SlideDown</span>;<span style="color: #ff0000;">

    -moz-animation-name</span>:<span style="color: #0000ff;">SlideDown</span>;<span style="color: #ff0000;">

    animation-name</span>:<span style="color: #0000ff;">SlideDown</span>;<span style="color: #ff0000;">

    -webkit-animation-duration</span>:<span style="color: #0000ff;">1s</span>;<span style="color: #ff0000;">

    -moz-animation-duration</span>:<span style="color: #0000ff;">1s</span>;<span style="color: #ff0000;">

    animation-duration</span>:<span style="color: #0000ff;">1s</span>;<span style="color: #ff0000;">

    -webkit-animation-fill-mode</span>:<span style="color: #0000ff;">forwards</span>;<span style="color: #ff0000;">

    -moz-animation-fill-mode</span>:<span style="color: #0000ff;">forwards</span>;<span style="color: #ff0000;">

    animation-fill-mode</span>:<span style="color: #0000ff;">forwards</span>;

}<span style="color: #800000;">

@-webkit-keyframes SlideDown</span>{<span style="color: #ff0000;">

    0% {height</span>:<span style="color: #0000ff;">30px</span>;}<span style="color: #800000;">

    100% </span>{<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;">155px</span>;}<span style="color: #800000;">

}

@-moz-keyframes SlideDown</span>{<span style="color: #ff0000;">

    0% {height</span>:<span style="color: #0000ff;">30px</span>;}<span style="color: #800000;">

    100% </span>{<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;">155px</span>;}<span style="color: #800000;">

}

@keyframes SlideDown</span>{<span style="color: #ff0000;">

    0% {height</span>:<span style="color: #0000ff;">30px</span>;}<span style="color: #800000;">

    100% </span>{<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;">155px</span>;}<span style="color: #800000;">

}</span>

ログイン後にコピー

1

2

3

4

5

6

7

8

9

10

11

12

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>

<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="dropmenu"</span><span style="color: #0000ff;">></span>

        <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="###"</span><span style="color: #0000ff;">></span>菜单栏<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>

        <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>

            <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="###"</span><span style="color: #0000ff;">></span>AAA<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>

            <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="###"</span><span style="color: #0000ff;">></span>AAA<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>

            <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="###"</span><span style="color: #0000ff;">></span>AAA<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>

            <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="###"</span><span style="color: #0000ff;">></span>AAA<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>

        <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

ログイン後にコピー

 　　效果：

菜单栏
  • AAA
  • AAA
  • AAA
  • AAA

 

　　

 

 

 

　　　　

関連ラベル：
CSS知识总结（九）
前の記事：【CSS】レイアウトの作成 次の記事：CSS 配置: 相対配置、絶対配置、固定配置 (相対絶対固定)
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート