<!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>
*{
margin:;
padding:;
}
.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:;
left:;
right:;
bottom:;
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:;
right:;
bottom:;
left:;
border-radius: 50%;
opacity:;
-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:;
right:;
bottom:;
left:;
border-radius: 50%;
opacity:;
-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:;
right:;
bottom:;
left:;
border-radius: 50%;
opacity:;
-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:;
-webkit-transform: scale(0.1, 0.1);
}
5% {
opacity:;
}
100% {
opacity:;
-webkit-transform: scale(1)
}
}
@-moz-keyframes ripple {
0% {
opacity:;
-moz-transform: scale(0.1, 0.1);
}
5% {
opacity:;
}
100% {
opacity:;
-moz-transform: scale(1)
}
}
@-o-keyframes ripple {
0% {
opacity:;
-o-transform: scale(0.1, 0.1);
}
5% {
opacity:;
}
100% {
opacity:;
-o-transform: scale(1)
}
}
@keyframes ripple {
0% {
opacity:;
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
-ms-transform: scale(0.1);
transform: scale(0.1);
}
5% {
opacity:;
}
100% {
opacity:;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
.target .line{
position:absolute;
width:60px;
height:;
border-top: 1px solid #fff;
box-shadow: 0 0 5px #000;
top:50%;
margin-top:-0.5px;
left:50%;
opacity:;
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:;
transform: translateX(0px);
}
50%{
transform: translateX(244px);
opacity:;
}
100%{
transform: translateX(498px);
opacity:;
}
}
@keyframes f3{
0%{
opacity:;
filter:alpha(opacity=0);
transform: rotate(32deg) translate(0px);
}
50%{
transform: rotate(32deg) translate(-140px);
opacity:;
filter:alpha(opacity=100);
}
100%{
transform: rotate(32deg) translate(-280px);
opacity:;
filter:alpha(opacity=0);
}
}1.css