css3运动后留下轨迹尾巴_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

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