CSS3效果：自定义“W”形运行轨迹实例

整理文档，搜刮出一个CSS3效果：“W”形运行轨迹实例的代码，稍微整理精简一下做下分享。

    
    
    
 *{
     margin: 0;
     padding:0;
 }
 #div{
     width:900px;
     height:400px;
     border:2px solid black;
     margin: 100px auto;
 }
 #span{
     float:left;
     display: block;
     font-size: 100px;
     width: 100px;
     height: 100px;
     line-height: 80px;
     text-align: center;
     border-radius: 50%;
     background: radial-gradient(blue,green);
     animation: move 4s ease 0s infinite alternate;
 }
 @keyframes move {
     0%{
  transform: translate(0px,0px);
     }
     25%{
  transform: translate(200px,300px);
     }
     50%{
  transform: translate(400px,0px);
     }
     75%{
  transform: translate(600px,300px);
     }
     100%{
  transform: translate(800px,0px);
     }
 }

    



    w

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。