css3直线运动_css3实现 两个点之间有一条线，循环运动

*{margin:0;padding:0;

}.outer{position:relative;width:800px;height:500px;margin:0 auto;

}.target{position:absolute;width:60px;height:60px;border-radius:50%;

}.target1{top:300px;left:100px;

}.target2{top:100px;left:380px;

}.target3{top:300px;left:680px;

}.target4{top:500px;left:30%;

}.target5{top:500px;right:30%;

}.target .point{position:absolute;top:0;left:0;right:0;bottom:0;width:10px;height:10px;margin:auto;-webkit-border-radius:50%;-webkit-background-clip:padding-box;-moz-border-radius:50%;-moz-background-clip:padding;border-radius:50%;background-clip:padding-box;background:transparent;

}.target .point-dot{background-color:#6AD7E9;

}.target1 .point-dot{background:green;border:1px solid green;

}.target2 .point-dot{background:#208adb;border:1px solid #208adb;

}.target3 .point-dot{background:#00ff00;border:1px solid #00ff00;

}.target4 .point-dot{background:yellowgreen;border:1px solid yellowgreen;

}.target5 .point-dot{background:#c01110;border:1px solid #c01110;

}.target1 .point-10:after,.target1 .point-40:after,.target1 .point-80:after{border:4px solid green;

}.target2 .point-10:after,.target2 .point-40:after,.target2 .point-80:after{border:2px solid #208adb;

}.target3 .point-10:after,.target3 .point-40:after,.target3 .point-80:after{border:2px solid #00ff00;

}.target4 .point-10:after,.target4 .point-40:after,.target4 .point-80:after{border:2px solid yellowgreen;

}.target5 .point-10:after,.target5 .point-40:after,.target5 .point-80:after{border:2px solid #c01110;

}.target .point-10{width:100%;height:100%;

}.target .point-10:after{content:'';display:block;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;opacity:0;-webkit-animation:ripple 4500ms ease-out 225ms infinite;-moz-animation:ripple 4500ms ease-out 225ms infinite;-o-animation:ripple 4500ms ease-out 225ms infinite;animation:ripple 4500ms ease-out 225ms infinite;

}.target .point-40{width:100%;height:100%;

}.target .point-40:after{content:'';display:block;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;opacity:0;-webkit-animation:ripple 4500ms ease-out 900ms infinite;-moz-animation:ripple 4500ms ease-out 900ms infinite;-o-animation:ripple 4500ms ease-out 900ms infinite;animation:ripple 4500ms ease-out 900ms infinite;

}.target .point-80{width:100%;height:100%;

}.target .point-80:after{content:'';display:block;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;opacity:0;-webkit-animation:ripple 4500ms ease-out 1800ms infinite;-moz-animation:ripple 4500ms ease-out 1800ms infinite;-o-animation:ripple 4500ms ease-out 1800ms infinite;animation:ripple 4500ms ease-out 1800ms infinite;

}@-webkit-keyframes ripple{0% {

opacity:0;-webkit-transform:scale(0.1, 0.1);

}5%{opacity:1;

}100%{opacity:0;-webkit-transform:scale(1)}}

@-moz-keyframes ripple{0% {

opacity:0;-moz-transform:scale(0.1, 0.1);

}5%{opacity:1;

}100%{opacity:0;-moz-transform:scale(1)}}

@-o-keyframes ripple{0% {

opacity:0;-o-transform:scale(0.1, 0.1);

}5%{opacity:1;

}100%{opacity:0;-o-transform:scale(1)}}

@keyframes ripple{0% {

opacity:0;-webkit-transform:scale(0.1);-moz-transform:scale(0.1);-ms-transform:scale(0.1);transform:scale(0.1);

}5%{opacity:1;

}100%{opacity:0;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);

}}

.target .line{position:absolute;width:60px;height:0;border-top:1px solid #fff;box-shadow:0 0 5px #000;top:50%;margin-top:-0.5px;left:50%;opacity:0;filter:alpha(opacity=0);

}.target1 .line{left:50%;top:30px;transform:rotate(0deg);

}.target2 .line{left:10px;top:60px;transform:rotate(74deg);

}.target3 .line{left:-30px;top:4px;transform:rotate(45deg);

}.target4 .line{left:10px;top:0px;transform:rotate(110deg);

}.target5 .line{left:-27px;top:16px;transform:rotate(28deg);

}.target1 .line{animation:f1 1s linear 0s infinite alternate;

}.target3 .line{animation:f3 1s linear 0s infinite alternate;

}@keyframes f1{0%{

opacity:0;transform:translateX(0px);

}50%{transform:translateX(244px);opacity:1;

}100%{transform:translateX(498px);opacity:0;

}}

@keyframes f3{0%{

opacity:0;filter:alpha(opacity=0);transform:rotate(32deg) translate(0px);

}50%{transform:rotate(32deg) translate(-140px);opacity:1;filter:alpha(opacity=100);

}100%{transform:rotate(32deg) translate(-280px);opacity:0;filter:alpha(opacity=0);

}}