首頁 > web前端 > css教學 > css動畫之模擬正餘弦曲線的實例分享

css動畫之模擬正餘弦曲線的實例分享

黄舟
發布: 2017-10-08 09:33:56
原創
1962 人瀏覽過

今天就寫一個css3拋物線的動畫吧= =

#從左到右的拋物線動畫,我們就暫且把動作分為勻速向右運動和變速的上下運動。

水平勻速運動我們可以利用translateX(x):定義2D 轉換,沿著X 軸移動元素;以及linear:動畫從頭到尾的速度是相同的 這兩個屬性值來實現;

上下的勻變速運動可以利用translateY(y):定義2D 轉換,沿著Y 軸移動元素;以及ease-in-out:動畫以低速開始和結束。

 

1.html

<div id="container">
      <div class="demobox">
           <div class="demo"></div>
      </div>
      <div class="demobox">
            <div class="demo"></div>
      </div>
</div>
登入後複製

把demobox的p做向右的勻速的運動,裡面demo的p做上下的變速的運動。

2.css

#container {
    height:110px;
    font-size:0;
    width:140px;
}
.demobox {
    float:right;
    width:5px;
    height:5px;
    animation:myfirst1 linear 5s infinite;
    -webkit-animation:myfirst1 linear 5s infinite; 
}
.demo {
    width:6px;
    height:6px;
    border-radius:3px;
    background:#90e4e9;
    animation:myfirst2 ease-in-out 1s infinite alternate;
    -webkit-animation:myfirst2 ease-in-out 1s infinite alternate;  /*Safari and Chrome */
}

.demobox:nth-of-type(1) .demo:nth-of-type(1){
    animation-delay:0s;
}
.demobox:nth-of-type(2) .demo:nth-of-type(1){
   animation-delay:0.03s;
}

@keyframes myfirst1
{
    from {
        transform:translateX(0px);
        -webkit-transform:translateX(0px);
    }
    to {
        transform:translateX(1000px);
        -webkit-transform:translateX(1000px);
    }
    
}

@-webkit-keyframes myfirst1 /* Safari and Chrome */
{
    from {
        transform:translateX(0px);
        -webkit-transform:translateX(0px);
    }
    to {
        transform:translateX(1000px);
        -webkit-transform:translateX(1000px);
    }
}
@keyframes myfirst2
{
    0% {
        transform:translateY(0px);
        -webkit-transform:translateY(0px);
    }
    50% {
        transform:translateY(100px);
        -webkit-transform:translateY(100px);
    }
    100% {
        transform:translateY(0px);
        -webkit-transform:translateY(0px);
    }
}

@-webkit-keyframes myfirst2 /* Safari and Chrome */
{
    0% {
        transform:translateY(0px);
        -webkit-transform:translateY(0px);
    }
    50% {
        transform:translateY(100px);
        -webkit-transform:translateY(100px);
    }
    100% {
        transform:translateY(0px);
        -webkit-transform:translateY(0px);
    }
}
登入後複製

ok,一個正餘弦曲線出來囉 @^-^@

以上是css動畫之模擬正餘弦曲線的實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板