zoukankan html css js c++ java

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>

*{
    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);
    }
}

1.css

查看全文

相关阅读:
C语言字符串之无重复字符的最长子串
 C语言递归之求根到叶节点数字之和
 C语言递归之二叉树的最大深度
 C语言递归之翻转二叉树
 C语言递归之对称二叉树
 C语言链表之两数相加
 如何把笔记本电脑的有线网分享给手机上
 安利spacemacs ^^
lambda创世纪
 jinterface包详解

原文地址：https://www.cnblogs.com/dongxiaolei/p/6419205.html

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

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