css实现三维立柱动态投票结果图表效果代码-html代码-BFW代码库

css实现三维立柱动态投票结果图表效果代码

代码语言：html

所属分类：图表

代码描述：css实现三维立柱动态投票结果图表效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

</head>
<body>
    <style>

@charset "utf-8";
    body {
        font-family: "microsoft yahei",Arial,Helvetica,sans-serif;
        padding: 100px;
    }
    ul,li {
        list-style: none
    }
    a {
        color: #777;
    }
    /*---------------------------*/
    .votebody {
        height: 100%;
        width: 100%;
        background: rgba( 0,0,0,0.6);
        position: relative;
    }
    .progress-bar {
        /* background-color:rgba(26,26,26,0.33); */
        height: 30px;
        padding: 5px;
        margin: 5px 25px 6px 0;
        margin-left: 80px;
        /* -moz-border-radius:35px 100px 100px 35px; */
        /* -webkit-border-radius:35px 100px 100px 35px; */
        /* border-radius:35px 100px 100px 35px; */
        /* -moz-box-shadow:0 1px 5px rgba(0,0,0,0.45) inset,0 1px 0 rgba(68,68,68,0.36); */
        /* -webkit-box-shadow:0 1px 5px rgba(0,0,0,0.45) inset,0 1px 0 rgba(68,68,68,0.36); */
        /* box-shadow:0 1px 5px rgba(0,0,0,0.45) inset,0 1px 0 rgba(68,68,68,0.36); */
    }
    .progress-bar span {
        display: inline-block;
        height: 100%;
        background-color: #1a73e8;
        /* -moz-border-radius:35px 100px 100px 35px; */
        /* -webkit-border-radius:35px 100px 100px 35px; */
        /* border-radius:35px 100px 100px 35px; */
        -moz-box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
        -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
        box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
        -webkit-transition: width .4s ease-in-out;
        -moz-transition: width .4s ease-in-out;
        -ms-transition: width .4s ease-in-out;
        -o-transition: width .4s ease-in-out;
        transition: width .4s ease-in-out;
    }
    .secondH {
        width: 100%;
        position: absolute;
        /* top: -19px; */
        bottom: 65%;
        left: 5.2px;
        opacity: 0.9;
        transform: skewX(-50deg)scaleY(0.3);
    }
    .thirdH {
        position: absolute;
        width: 30px;
        left: 100%;
        transform: skewY(-40deg) scaleX(0.4) translateX(-25px);
        bottom: 13px;
        z-index: -1;
    }

    /*---------------------------*/

    .toupiao li:nth-child(10n+1) span {
        background-color: #34c2e3;
    }
    .toupiao li:nth-child(10n+2) span {
        background-color: #08B40F;
    }
    .toupiao li:nth-child(10n+3) span {
        background-color: #FF4141;
    }
    .toupiao li:nth-child(10n+4) span {
        background-color: #D3C203;
    }
    .toupiao li:nth-child(10n+5) span {
        background-color: #0066FF;
    }
    .toupiao li:nth-child(10n+6) span {
        background-color: #6E08DB;
    }
    .toupiao li:nth-child(10n+7) span {
        background-color: #FF8F00;
    }
    .toupiao li:nth-child(10n+8) span {
        background-color: #8CB609;
    }
    .toupiao li:nth-child(10n+9) span {
        background-color: #CE4FFF;
    }
    .toupiao li:nth-child(10n+10) span {
        background-color: #949494;
    }
    /*---------------------------*/

    .stripes span {
        -webkit-background-size: 30px 30px;
        -moz-background-size: 30px 30px;
        background-size: 30px 30px;
        background-image: -webkit-gradient(linear,left top,right bottom,color-stop(.25,rgba(255,255,255,.15)),color-stop(.25,transparent),color-stop(.5,transparent),color-stop(.5,rgba(255,255,255,.15)),color-stop(.75,rgba(255,255,255,.15)),color-stop(.75,transparent),to(transparent));
        background-image: -webkit-linear-gradient(135deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
        background-image: -moz-linear-gradient(.........完整代码请登录后点击上方下载按钮下载查看