css3实现 两个点之间有一条线,循环运动
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="1.css"/> </head> <body> <div class="outer"> <div class="target target1"> <div class="point point-dot"></div> <div class="point point-10"></div> <div class="point point-40"></div> <div class="line"></div> </div> <div class="target target2"> <div class="point point-dot"></div> <div class="point point-10"></div> <div class="point point-40"></div> <div class="line"></div> </div> <div class="target target3"> <div class="point point-dot"></div> <div class="point point-10"></div> <div class="point point-40"></div> <div class="line"></div> </div> <div class="target target4"> <div class="point point-dot"></div> <div class="point point-10"></div> <div class="point point-40"></div> <div class="line"></div> </div> <div class="target target5"> <div class="point point-dot"></div> <div class="point point-10"></div> <div class="point point-40"></div> <div class="line"></div> </div> </div> <script> /* function angle(x01,y01,x02,y02){//计算角度 var diff_x = x02 - x01, diff_y = y02 - y01; //返回角度,不是弧度 var t=360*Math.atan(diff_y/diff_x)/(2*Math.PI); console.log(t); } function distance(x01,y01,x02,y02) {//计算两点之间直线距离 var x1 = eval(x01); var y1 = eval(y01); var x2 = eval(x02); var y2 = eval(y02); var xdiff = x2 - x1; var ydiff = y2 - y1; var distance = Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5); console.log(distance); } angle(100,300,380,100); distance(100,300,380,100)*/ function getNum(x01,y01,x02,y02){//计算角度 var x1 = eval(x01), y1 = eval(y01), x2 = eval(x02), y2 = eval(y02), xdiff = x2 - x1, ydiff = y2 - y1; //返回角度,不是弧度 var t=360*Math.atan(ydiff/xdiff)/(2*Math.PI); console.log(t); var distance = Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5); console.log(distance); } getNum(100,300,380,100); getNum(300,680,100,380); </script> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
*{ 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); } }