動的変換のCSSの背景色
その他
2019-12-14 01:39:46
訪問数: null
最初のレンダリング
HTMLコード：
1
2
3
4
5
6
7
8
9
|
<DIV CLASS = "ヘッダ">
<H1> GCCHRN'Sブログ</ H1>
<ULクラス= "NAV NAV-タブ">
<LI役割= "プレゼンテーション"クラス= "アクティブ"> <a href="#">首页</a>の</ LI>
<LIの役割= "プレゼンテーション"> <a href="#">分类する</a>ます。</ li>
<LIの役割= "プレゼンテーション"> <a href="#">归档</a>の</ LI>
<LIの役割= "プレゼンテーション"> <a href="#">关于する</a>ます。</ li>
</ ulの>
</ div>
|
CSSコード：
。1
2
3
4
5
6
7
8
9
10
11
12である
13である
14
15
16
17
18である
。19
20
21最大列 変換ダイナミックのCSSの背景色 PAN>
22である
23である
24
25
26である
27
28
29
30
31であり、
32
|
<スタイルタイプ= "テキスト/ CSS">
.header {
パディング：40ピクセル30px 60PX 30px;
テキスト整列=左：センター;
アニメーション：mymove 5S無限; /アニメーション*ビューの時間* /
アニメーション方向：代替; / *ループがあれば交互* /アニメーションを再生逆転
* /：/ * Safariとクローム
-webkit-アニメーション：mymove 5S無限;
}
@keyframes mymove
{ 0％{背景：＃1 87CEFF;} 25％{背景：＃54FF9F;} 50％{背景：＃1 7CCD7C;} 75％{背景：＃63B8FF;} 100％{背景：＃1 00FFFF;} }
/ *サファリ和クローム：* /
@ -webkit-キーフレームmymove
{
0％{背景：＃87CEFF;}
25％{背景：＃54FF9F;}
50％{背景：＃1 7CCD7C;}
75％{背景：＃63B8FF;}
100％{背景：＃00FFFF;}
} </スタイル>
|
- 私は前のように好きだったことを見つけるためにのみ、
- 特にこの動的効果のために、
- 特に、のような
- 私は抵抗することはできません、
- これは始まりに過ぎません、
- 主に自分の記録を確認し、
- その後、少しずつ進行することにより、
- 目に見える進展を作ろう！
転載: www.cnblogs.com/lijianming180/p/12037921.html