css动画之模拟正余弦曲线的实例分享-css教程-PHP中文网

css动画之模拟正余弦曲线的实例分享

黄舟

发布： 2017-10-08 09:33:56

原创

1951 人浏览过

今天就写一个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中文网其他相关文章！