zoukankan      html  css  js  c++  java
  • 圆圈的动态百分比

    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .yieldCircle {
    position: relative;
    margin: 0 auto;
    50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.34);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    }

    .yieldCircle .progressCircle {
    transition: stroke-dasharray 0.4s linear 0.2s;
    -webkit-transition: stroke-dasharray 0.4s linear 0.2s;
    }

    .yieldCircle .lineEnd {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform-origin: 19px 19px;
    -webkit-transform-origin: 19px 19px;
    -webkit-transition: transform 0.4s linear 0.2s;
    transition: transform 0.4s linear 0.2s;
    }
    </style>
    </head>

    <body>
    <div class="yieldCircle">
    <svg width="500px" height="500px" viewBox="0 0 38 38" class="J_circle">
    <circle r="16.7" cx="19" cy="19" fill="#FFEBEF"></circle>
    <circle r="15.1" cx="19" cy="19" fill="#ffffff"></circle>
    <circle class="progressCircle J_preC" r="16" cx="19" cy="19" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round" stroke="#E63256" stroke-dasharray="0 100" fill="none" transform="rotate(-180, 19 19)"></circle>
    </svg>
    </div>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    $("svg").attr("data-pre", 50);
    $('.J_circle').each(function() {
    var $svg = $(this);
    var pre = $svg.data('pre');
    var $progress = $svg.find('.J_preC');
    if(!pre) {
    $progress.hide();
    }
    $progress.attr('stroke-dasharray', pre + ' 100');
    $progress.attr('stroke-opacity', '1');
    });
    </script>
    </body>

    </html>

  • 相关阅读:
    设计模式责任链模式(COR)
    设计模式享元模式(Flyweight)
    设计模式外观模式(Facade)
    设计模式桥接模式(Bridge)
    设计模式适配器(Adapter)
    设计模式解释器模式(Interpreter)
    Ext出来个3.0.1版本,不过不能免费下载了,郁闷
    150天成为JAVA高级程序员?
    Drools业务逻辑框架
    HQL中In的问题详解
  • 原文地址:https://www.cnblogs.com/colorsed/p/7736623.html
Copyright © 2011-2022 走看看