首页技术正文

css动画-模拟正余弦曲线

程序员天才技术 2022年11月13日

0 收藏 601 点赞 4,912 浏览 1685 个字

今天就写一个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的div做向右的匀速的运动，里面demo的div做上下的变速的运动。

2.css

 #container {
     height:110px;
     font-size:;
     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);
     }
 }