A我今天學(xué)了什么

動畫animation
//定義：@keyframes （//關(guān)鍵幀）

1、@keyframes myfirst
{
form{background:red;}
to{background:yellow；}
}

列子：
//HTML
<div class="box"></div>

.box{
            width: 100px;
            height: 100px;
            background-color: orange;
  @keyframes aa {
            from{
                width: 100px;
                height: 100px;
                background-color: orange;
            }
            to{
                width: 200px;
                height: 200px;
                background-color: yellow;
            }
        }

2、@keyframes myfirst
{
0%{background:red;}
25%{background:yellow；}
50%{background:blue；}
100%{background:green；}
}

列子：
//HTML
<div class="box"></div>

//CSS
   /*.box:hover{*/
            /*animation: bb 15s ;*/
        /*}*/

 @keyframes  bb {
            0%{
                width: 100px;
                height: 100px;
                background-color: orange;
            }
            20%{
                width: 400px;
                height: 100px;
                background-color: yellow;
            }
            40%{
                width: 100px;
                height: 100px;
                background-color: yellow;
            }
            60%{
                width: 100px;
                height: 500px;
                background-color: aquamarine;
            }
            80%{
                width: 100px;
                height: 300px;
                background-color: orange;
            }
            100%{
                width: 100px;
                height: 500px;
                background-color: orange;
            }
        }

animation 動畫片制作

div {animation:myfirst 2s;}
//動畫片：我的第一次2秒

div{animation:myfirst 2s infinite;}
//無限循環(huán)

B我今天掌握了什么

動畫animation
//定義：@keyframes （//關(guān)鍵幀）

1、@keyframes myfirst
{
form{background:red;}
to{background:yellow；}
}

列子：
//HTML
<div class="box"></div>

.box{
            width: 100px;
            height: 100px;
            background-color: orange;
  @keyframes aa {
            from{
                width: 100px;
                height: 100px;
                background-color: orange;
            }
            to{
                width: 200px;
                height: 200px;
                background-color: yellow;
            }
        }

2、@keyframes myfirst
{
0%{background:red;}
25%{background:yellow；}
50%{background:blue；}
100%{background:green；}
}

列子：
//HTML
<div class="box"></div>

//CSS
   /*.box:hover{*/
            /*animation: bb 15s ;*/
        /*}*/

 @keyframes  bb {
            0%{
                width: 100px;
                height: 100px;
                background-color: orange;
            }
            20%{
                width: 400px;
                height: 100px;
                background-color: yellow;
            }
            40%{
                width: 100px;
                height: 100px;
                background-color: yellow;
            }
            60%{
                width: 100px;
                height: 500px;
                background-color: aquamarine;
            }
            80%{
                width: 100px;
                height: 300px;
                background-color: orange;
            }
            100%{
                width: 100px;
                height: 500px;
                background-color: orange;
            }
        }

animation 動畫片制作

div {animation:myfirst 2s;}
//動畫片：我的第一次2秒

div{animation:myfirst 2s infinite;}
//無限循環(huán)

C今天沒有掌握的

沒有