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

代码语言:html

所属分类:图表

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

代码标签: 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% { 
        .........完整代码请登录后点击上方下载按钮下载查看

网友评论0