當前位置：首頁 > 網頁制作 > HTML/Xhtml > 詳細頁面

HTML連載72-動畫效果及其他屬性

時間：2020-03-04來源：電腦系統城作者：電腦系統城

一、動畫效果

1.過渡與動畫相類似，都需要三要素，那么他們的區別在哪里呢？

?答：過渡必須是人為的觸發才會執行動畫，動畫不需要人為的觸發就可以自動執行?動畫。

2.?相同點：

（1）過度和動畫都是用來給元素添加動畫的；（2）過渡和動畫都是系統?新增的一些屬性；（3）過渡和動畫都需要滿足三要素才會有動畫效果

3.動畫的三要素

（1）告訴系統需要執行哪個動畫?；

 

animation-name:動畫名稱;

（2）告訴系統我們需要自己創建一個自定義名稱的動畫

復制代碼

@keyframs  動畫名稱{

    from{

    }

    to{

    }

}

復制代碼

（3）動畫持續的時長

 

animation:時間；/*這里的時間可以使用秒做單位*/

復制代碼

 

    <style>

        *{

            padding:0;

            margin:0;

        }

        div{

            width:100px;

            height: 50px;

            background-color: red;

           

            animation-name:lnj;

            animation-duration: 1s;

        }

        @keyframes lnj {

            from{

                margin-left:0;

            }

            to{

                margin-left:500px;

            }

        }

.........省略代碼........

<div></div>

復制代碼

二、動畫模塊其他屬性

復制代碼

    <style>

        *{

            padding:0;

            margin:0;

        }

        div{

            width: 100px;

            height: 50px;

            background-color: red;

            animation-name:sport;

            animation-duration: 1s;

            animation-delay:1s;/*動畫執行前的延遲時間*/

            animation-timing-function:linear;/*動畫持續的速度函數類型*/

            animation-iteration-count:3;/*動畫執行的次數*/

            animation-direction:alternate;/*動畫執行循環往復，循環往復一次是算兩次動畫效果的，如果使用normal，那么就是重復動畫而已，默認是此值*/

            animtion-play-state:running;/*默認是running,也就是執行動畫*/

        }

        @keyframes sport {

            from{

                margin-left:0px;

            }

            to{

                margin-left:500px;

            }

        }

        div:hover{

            /*告訴系統當前動畫是否需要暫停*/

            animation-play-state:paused;

        }

.........省略代碼.......

<div></div>

復制代碼

三、動畫效果其他屬性下

通過我們的觀察，動畫是有一定的狀態的

（1） ?等待狀態；（2）?執行狀態；（3）結束狀態

 

animation-fill-mode:none;

屬性值有四種

n?one:不做任何的改變；

forwards:讓元素結束狀態保持動畫的最后一幀的樣式

backwards:讓元素等待狀態的時候顯示動畫的第一幀的樣式

both:?兩個屬性值的效果都顯示。

復制代碼

    <style>

        *{

            padding:0;

            margin:0;

        }

        .box1{

            width: 100px;

            height: 50px;

            background-color: red;

            animation-name:sport;

            animation-duration:2s;

        }

        @keyframes sport {/*這里的百分比代表占用的時間*/

            0%{

                margin-left:0px;

                margin-top:0px;

            }

            10%{

                margin-left: 300px;

                margin-top:0px;

            }

            20%{

                margin-left:300px;

                margin-top:300px;

            }

            30%{

                margin-left:0px;

                margin-top:300px;

            }

            100%{

                margin-left:0px;

                margin-top:0px;

            }

        }

?

        .box2{

            width: 100px;

            height: 50px;

            background-color: red;

            margin:100px auto;

            animation-name:sport2;

            animation-duration:2s;

            animation-fill-mode:backwards;

            animation-delay:2s;

        }

        @keyframes sport2 {

            0%{

                tranform:rotate(10deg);

            }

            25%{

                transform:rotate(45deg);

            }

            50%{

                transform:rotate(79deg);

            }

            100%{

                transform:rotate(160deg);

            }

        }

</style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

復制代碼

相關信息

2021-04-22
巧用 -webkit-box-reflect 倒影實現各類動效(小結)
2021-04-22
HTML+CSS+JS實現圖片的瀑布流布局的示例代碼
2020-03-04
HTML5 video自定義視頻播放器

HTML5之audio屬性
audio主要支持的音頻格式：mp3 ogg wav<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>audio</title></head><body>  <a...

2020-03-04
徹底搞懂flex彈性盒模型布局
為什么要用flex 基于css3簡單方便，更優雅的實現，瀏覽器兼容性好，傳統的css實現一個div居中布局要寫一堆代碼，而現在幾行代碼就搞定了，沒有理由不用flex。...

2020-02-28

熱門系統總排行

裝機必備

系統教程欄目

欄目熱門教程

人氣教程排行

站長推薦

熱門系統下載

24小时免费更新在线视频_丝袜放荡妩媚美腿娇妻_99re6这里有精品热视频_国色天香社区论坛