css3 實現動畫

時間 2019-11-08

標籤 css3 css 實現動畫欄目 CSS 简体版

原文原文鏈接

CSS3，咱們能夠建立動畫，它能夠取代許多網頁動畫圖像，例以下面這個小球動畫css

使用css3關鍵幀動畫能夠輕鬆實現html

請看下面代碼css3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>關鍵幀動畫</title>
</head>
<style type="text/css">

@keyframes move {
    10%{
        transform: translate(50px,50px)
    }
    30%{
        transform: translate(150px,150px) scale(1.5);
    }
    50%{
        transform: translate(250px,150px) scale(1);
    }
    70%{
        transform: translate(350px,250px) scale(2);
    }
    100%{
        transform: translate(0px,0px) scale(1);
    }
}

@-webkit-keyframes move {
    10%{
        -webkit-transform: translate(50px,50px)
    }
    30%{
        -webkit-transform: translate(150px,150px) scale(1.5)
    }
    50%{
        -webkit-transform: translate(250px,150px) scale(1)
    }
    70%{
        -webkit-transform: translate(350px,250px) scale(2)
    }
    100%{
        -webkit-transform: translate(0px,0px) scale(1)
    }
}


.box{
    width: 30px;
    height: 30px;
    background-color: pink;
    border-radius: 50%;
    
    /* 規定 @keyframes 動畫的名稱 */
    animation-name:move;
    -webkit-animation-name:move;
    -o-animation-name:move;
    -ms-animation-name:move;
    -moz-animation-name:move;
    /* 規定動畫完成一個週期所花費的秒 默認是 0 */
    animation-duration:1s;
    -webkit-animation-duration:1s;
    -o-animation-duration:1s;
    -ms-animation-duration:1s;
    -moz-animation-duration:1s;
    /* 規定動畫的速度曲線。默認是 "ease" */
    animation-timing-function: linear; 
    -webkit-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    /* 規定動畫什麼時候開始。默認是 0 */
    animation-delay: 0;
    -webkit-animation-delay: 0;
    -o-animation-delay: 0;
    -ms-animation-delay: 0;
    -moz-animation-delay: 0;
    /* 規定動畫被播放的次數。默認是 1 */
    animation-iteration-count: infinite; 
    -webkit-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite; 
    -moz-animation-iteration-count: infinite;
}


</style>
<body>
    <div class="box"></div>
</body>
</html>

動畫類型不單單侷限於 translate（平移）還能夠是 scale（縮放）rotate（旋轉）等web

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。