css实现人脉关系图表效果代码-html代码-BFW代码库

代码语言：html

所属分类：图表

代码描述：css实现人脉关系图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        * {
        
        margin: 0;
        padding: 0;
    }
    
    
    body {
        background: #2b3773;
    }
    .socialAnimation{
        width: 400px;
        height: 300px;
        margin: 20px auto;
    }
    .socialAnimation li{
        position: absolute;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: 1px solid #fff;
        list-style-type: none;
        -webkit-animation: scaleLi 4s ease-in-out infinite;
        -moz-animation: scaleLi 4s ease-in-out infinite;
        -o-animation: scaleLi 4s ease-in-out infinite;
        -ms-animation: scaleLi 4s ease-in-out infinite;
        animation: scaleLi 4s ease-in-out infinite;
    }
    @-webkit-keyframes scaleLi {
        0% { 
            -webkit-transform: scale(1);
        }
        45% { 
            -webkit-transform: scale(1);
        }
        60% {
            -webkit-transform: scale(1.2);
        }
        75% { 
            -webkit-transform: scale(1);
        }
        100% { 
            -webkit-transform: scale(1);
        }
    }
    @-moz-keyframes scaleLi {
        0% { 
            -moz-transform: scale(1);
        }
        45% { 
            -moz-transform: scale(1);
        }
        60% {
            -moz-transform: scale(1.2);
        }
        75% { 
            -moz-transform: scale(1);
        }
        100% { 
            -moz-transform: scale(1);
        }
    }
    @-o-keyframes scaleLi {
        0% { 
            -o-transform: scale(1);
        }
        45% { 
            -o-transform: scale(1);
        }
        60% {
            -o-transform: scale(1.2);
        }
        75% { 
            -o-transform: scale(1);
        }
        100% { 
            -o-transform: scale(1);
        }
    }
    @-ms-keyframes scaleLi {
        0% { 
            -ms-transform: scale(1);
        }
        45% { 
            -ms-transform: scale(1);
        }
        60% {
            -ms-transform: scale(1.2);
        }
        75% { 
            -ms-transform: scale(1);
        }
        100% { 
            -ms-transform: scale(1);
        }
    }
    @keyframes scaleLi {
        0% { 
            transform: scale(1);
        }
        45% { 
            transform: scale(1);
        }
        60% {
            transform: scale(1.2);
        }
        75% { 
            transform: scale(1);
        }
        100% { 
            transform: scale(1);
        }
    }
    
    .socialAnimation .person{
        width: 80px;
        height: 80px;
        margin: 110px 0 0 160px;
        z-index: 9;
    }
    .socialAnimation .person img{
        width: 70px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        margin: 5px;
        background-color: #fff;
    }
    
    .socialAnimation li div.connector{
        position: absolute;
        background-color: #fff;
        height: 5px;
    }
    .socialAnimation li div.connector span{
        display: block;
        width: 15px;
        height: 15px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        background-color: #fff;
        margin: -5px 0 0 0;
        position: absolute;
        -webkit-animation: connections 4s ease-in-out infinite;
        -moz-animation: connections 4s ease-in-out infinite;
        -o-animation: connections 4s ease-in-out infinite;
        -ms-animation: connections 4s ease-in-out infinite;
        animation: connections 4s ease-in-out infinite;
    
    }
    .socialAnimation li div.connector span.two{
        -webkit-animation: connections 4s ease-in-out infinite 1s;
        -moz-animation: connections 4s ease-in-out infinite;
        -o-animation: connections 4s ease-in-out infinite;
        -ms-animation: connections 4s ease-in-out infinite;
        animation: connections 4s ease-in-out infinite 1s;
    }
    
    @-webkit-keyframes connections {
        0% { left: 0}
        80% { left: 100%; }
    }
    @-moz-keyframes connections {
        0% { left: 0}
        80% { left: 100%; }
    }
    @-o-keyframes connections {
        0% { left: 0}
        80% { left: 100%; }
    }
    @-ms-keyframes connections {
        0% { left: 0}
        80% { left: 100%; }
    }
    @keyframes connections {
        0% { left: 0}
        80% { left: 100%; }
    }
    
    .socialAnimation li .containerImg{
        position: absolute;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        background-color: #fff;
        -webkit-transition: background 0.3s linear;
        -moz-transition: background 0.3s linear;
        -o-transition: background 0.3s linear;
        -ms-transition: background 0.3s linear;
        transition: background 0.3s linear;
        z-index: 10;
        background-repeat: no-repeat;
    }
    
    .socialAnimation .facebook{
        width: 90px;
        height: 90px;
    }
    .socialAnimation .facebook .containerImg{
        background-image: url("//repo.bfw.wiki/bfwrepo/image/60e2569c6ff1e.png");
            background-size: cover;
    }
    .socialAnimation .facebook:hover .containerImg{
        background-image: url("//repo.bfw.wiki/bfwrepo/image/60e2569c6ff1e.png");
            background-size: cover;
    }
    .socialAnimation .facebook .containerImg{
        width: 80px;
        height: 80px;
        margin: 5px;
    }
    .socialAnimation .facebook div.connector{
        position: absolute;
        background-color: #fff;
        height: 5px;
        width: 150px;
        margin: 105px 0 0 65px;
    
        transform:rotate(-115deg); 
        -webkit-transform:rotate(-145deg); 
        -moz-transform:rotate(-135deg); 
        -ms-transform:rotate(-135deg); 
        -o-transform:rotate(-115deg); 
    
    }
    
    
    .socialAnimation .googlePlus{
        width: 85px;
        height: 85px;
        margin: 20px 0 0 240px;
    }
    .s.........完整代码请登录后点击上方下载按钮下载查看