我怎么能做圆圈填充百分比？

时间：2017-01-27 04:15:15

标签： html5 css3 canvas

我想做这个psd，但我尝试使用border radius表单，但它不知道如何做到这一点。我该怎么做 ？或者，如果有人可以帮助我做圈子，这可能是一个很大的帮助...我需要首先设置100％的所有圈子，然后将其更改为客户百分比 psd image

html 

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <link rel="stylesheet" href="css/wrfrm.css">
   </head>
   <body>
      <section class="header">
         <header>
            <nav>
               <h1>wrfrm<span>wireframe kit</span></h1>
               <ul>
                  <li><a href="#">work</a></li>
                  <li><a href="#">service</a></li>
                  <li><a href="#">about</a></li>
                  <li><a href="#">blog</a></li>
                  <li><a href="#">contact</a></li>
               </ul>
            </nav>
         </header>
      </section>
      <section class="banner">
         <div class="banner_text">
            <h1>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span></h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.<span> Cum sociis  natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus Donec quam felis, ultricies nec</span></p>
            <a href="#">button</a>
            <img src="img/16251331_10210478393849069_2072529108_o.png" alt="">
         </div>
      </section>
      <section class="feactures">
         <div class="nav-header">
            <h1>feacture</h1>
            <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula eget dolor Aenean massa Aenean commodo <span>ligula eget dolor Aenean commodo ligula eget dolor ligula eget dolor Aenean commodo ligula eget dolor</span></p>
            <div class="container">
               <div class="square">
                  <img src="img/check.png" alt="">
                  <div class="container_text">
                     <h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2>
                     <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula <span>eget dolor Aenean massas</span></p>
                  </div>
               </div>
               <div class="square">
                  <img src="img/check.png" alt="">
                  <div class="container_text">
                     <h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2>
                     <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula <span>eget dolor Aenean massas</span></p>
                  </div>
               </div>
               <div class="square">
                  <img src="img/check.png" alt="">
                  <div class="container_text">
                     <h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2>
                     <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula <span>eget dolor Aenean massas</span></p>
                  </div>
               </div>
               <div class="square">
                  <img src="img/check.png" alt="">
                  <div class="container_text">
                     <h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2>
                     <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula <span>eget dolor Aenean massas</span></p>
                  </div>
               </div>
            </div>
         </div>
      </section>
      <section class="read_more">
         <div class="container_read_more">
            <div class="structure">
               <img src="img/icon.png" class="icon">
               <h1>title</h1>
               <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula 
                  Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula
               </p>
               <a href="#">read more</a>
            </div>
         </div>
         <div class="container_read_more custom">
            <div class="structure">
               <img src="img/icon.png"  class="icon">
               <h1>title</h1>
               <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula 
                  Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula
               </p>
               <a href="#" >read more</a>
            </div>
         </div>
         <div class="container_read_more">
            <div class="structure">
               <img src="img/icon.png" class="icon">
               <h1>title</h1>
               <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula 
                  Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula
               </p>
               <a href="#">read more</a>
            </div>
         </div>
      </section>
      <section class="work">
         <div class="work_container">
            <div class="work-header">
               <h1>our work</h1>
               <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula <span>eget dolor Aenean massadipiscing elit. Aenean commodo ligulaas</span></p>
            </div>
         </div>
         <p class="filter-buttons">
            <a href="#" id="all" class="active">All</a>
            <a href="#" id="web"> Web</a>
            <a href="#" id="apps">Apps</a>
            <a href="#" id="icons">Icons</a>
         </p>
         <div class="work-cast">
            <table>
               <tr>
                  <th>
                     <div class="member">
                        <img src="img/icon.png" alt="">
                        <div class="name">
                           <span>Lorem ipsum dolor</span>
                           <p>Loremipsumdolor</p>
                        </div>
                     </div>
                  </th>
                  <th>
                     <div class="member">
                        <img src="img/icon.png" alt="">
                        <div class="name">
                           <span>Lorem ipsum dolor</span>
                           <p>Loremipsumdolor</p>
                        </div>
                     </div>
                  </th>
                  <th>
                     <div class="member">
                        <img src="img/icon.png" alt="">
                        <div class="name">
                           <span>Lorem ipsum dolor</span>
                           <p>Loremipsumdolor</p>
                        </div>
                     </div>
                  </th>
                  <th>
                     <div class="member">
                        <img src="img/icon.png" alt="">
                        <div class="name">
                           <span>Lorem ipsum dolor</span>
                           <p>Loremipsumdolor</p>
                        </div>
                     </div>
                  </th>
               </tr>
               <tr>
                  <td>
                     <div class="member">
                        <img src="img/icon.png" alt="">
                        <div class="name">
                           <span>Lorem ipsum dolor</span>
                           <p>Loremipsumdolor</p>
                        </div>
                     </div>
                  </td>
                  <td>
                     <div class="member">
                        <img src="img/icon.png" alt="">
                        <div class="name">
                           <span>Lorem ipsum dolor</span>
                           <p>Loremipsumdolor</p>
                        </div>
                     </div>
                  </td>
                  <td>
                     <div class="member">
                        <img src="img/icon.png" alt="">
                        <div class="name">
                           <span>Lorem ipsum dolor</span>
                           <p>Loremipsumdolor</p>
                        </div>
                     </div>
                  </td>
                  <td>
                     <div class="member">
                        <img src="img/icon.png" alt="">
                        <div class="name">
                           <span>Lorem ipsum dolor</span>
                           <p>Loremipsumdolor</p>
                        </div>
                     </div>
                  </td>
               </tr>
            </table>
            <br>
            <br>
            <br>
         </div>
      </section>
      <section class="bar">
            <div class="bar_container">
                <div class="content">
                    <h3>Lorem ipsum dolor</h3>
                    <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula eget dolor Aenean massas</p><span>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula eget dolor Aenean massas</span>
                    <div class="container_buttons">
                        <a href="#" class="button_same">button</a>
                        <a href="#" class="button_green">button</a>
                    </div>
                </div>
            </div>
      </section>
      <section class="blog">
            <div class="blog_container">
                <div class="content_blog">
                    <h1>our blog</h1>
                    <p>ipsum ipsum ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula eget dolor Aenean massas<span>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula eget dolor Aenean </span></p>
                    <div class="blog_square">
                        <div class="_blog">
                        <img src="img/icon.png" alt="">
                        <h3>ipsum ipsum ipsum</h3>
                        <span>by admin | 19 APRIL</span>
                        <p>ipsum ipsum ipsum dolor sit amet consectetuer<br>
                        ipsum ipsum ipsum dolor sit amet consectetueaaar<br> 
                        ipsum ipsum ipsum dolor sit amet consectetueaaaaa</p>
                     </div>
                    </div>
                    <div class="blog_square">
                        <div class="_blog">
                        <img src="img/icon.png" alt="">
                        <h3>ipsum ipsum ipsum</h3>
                        <span>by admin | 19 APRIL</span>
                        <p>ipsum ipsum ipsum dolor sit amet consectetuer<br>
                        ipsum ipsum ipsum dolor sit amet consectetueaaar<br> 
                        ipsum ipsum ipsum dolor sit amet consectetueaaaaa</p>
                     </div>
                    </div>
                    <div class="blog_square">
                        <div class="_blog">
                        <img src="img/icon.png" alt="">
                        <h3>ipsum ipsum ipsum</h3>
                        <span>by admin | 19 APRIL</span>
                        <p>ipsum ipsum ipsum dolor sit amet consectetuer<br>
                        ipsum ipsum ipsum dolor sit amet consectetueaaar<br> 
                        ipsum ipsum ipsum dolor sit amet consectetueaaaaa</p>
                     </div>
                    </div>
                    <div class="blog_square">
                        <div class="_blog">
                        <img src="img/icon.png" alt="">
                        <h3>ipsum ipsum ipsum</h3>
                        <span>by admin | 19 APRIL</span>
                        <p>ipsum ipsum ipsum dolor sit amet consectetuer<br>
                        ipsum ipsum ipsum dolor sit amet consectetueaaar<br> 
                        ipsum ipsum ipsum dolor sit amet consectetueaaaaa</p>
                     </div>
                    </div>
                </div>
            </div>
      </section>
      <section class="subscribe">
        <div class="subscribe_container">
            <h2>ipsum ipsum ipsum</h2>
            <div class="subscribe_buttons">
               <input type="text" name="email" placeholder="Your Email" class="email">
               <button class="subscribe_green">subscribe</button>
            </div>
        </div>
      </section>
      <section class="porcentage">
         <div class="porcentage_container">
            <h1>ipsum ipsum ipsum</h1>
            <p>ipsum ipsum ipsum dolor sit amet consectetuer sit amet consectetuer<br>
            ipsum ipsum ipsum sit amet consectetuer dolor sit amet aar<br> 
            ipsum ipsum ipsum dolor sit amet consectetueaaaaa</p>
            <div class="circles">
               <div class="circles_container">
                   <div class="_porcentage">
                        <div class="chart" id="graph" data-percent="100"></div>
                   </div>
               </div>
            </div>
         </div>
      </section>
   </body>
</html>

CSS 

*{
    padding: 0;
    margin: 0;
    border: 0;
}

header{
    margin-right: 100px;
    margin-left: 100px;
}

header nav > h1{
    text-transform: uppercase;
    color : #505a78;
    margin-top: 20px;
    font-size: 20px;
}

h1 span {
    display: block;
    font-size: 0.4em;
    text-transform: uppercase;
}

header nav > ul {
    list-style: none;
    margin-top: -30px;
}

header nav > ul li a{
    display: inline-block;
    float: right;
    margin: 8px;
    color: #505a78;
    font-size: 15px;
    font-weight: bold;
}

a{
    text-decoration: inherit;
}

.header{
    width: 100%;
    height: 100px;
}

.banner{
    width: 100%;
    height: 500px;
    background-color: #505a78;
}

.banner p{
    display: block;
}

.banner_text{
    color: #fff;
    padding: 150px;
}

.banner_text h1,
.banner_text h1 span{
    font-size: 35px;
}

.banner_text p{
    color: #a5abbb;
}

.banner_text p > span{
    display: block;
}

.banner_text a {
    margin-top: 25px;
    display: block;
    color: white;
    text-align: center;
    width: 62px;
    padding: 4px 25px;
    text-align: center;
    background-color: #7cdf95;
    font-weight: bold;
}

.banner_text img {
    width: 100%;
    margin-top: -238px;
    margin-left: 110px;
}

.feactures{
    width: 100%;
    height: 500px;
}

.nav-header{
    text-align: center;
    margin-top: 65px;
}

.nav-header h1{
    font-size: 35px;
    color: #505a78;
    text-transform: uppercase;
}

.nav-header p{
    font-size: 0.8em;
    color: #a5abbb;
}

.nav-header p > span{
    display: block;
}

.container {
    width: 100%;
    height: 280px;
    margin-top: 70px;
    margin-left: -200px;
}


.square {
    width: 600px;
    height: 100px;
    display: inline-block;
}

img{
    width: 10%;
}

.container_text {
    position: absolute;
    font-size: 10px;
    margin-top: -50px;
    margin-left: 350px;
}

.container_text p{
    font-size: 1em;
}

.read_more{
    width: 100%;
    height: 300px;
    background-color: #505a78;
}

.container_read_more{
    display: inline-block;
    width: 33%;
    height: 300px;
    background-color: #505a78;
}

.custom{
    background-color: #485270;
}

.container_read_more .structure{
    text-align: center;
    color: #fff;
    margin-top: 100px;
    margin-bottom: 100px;
}

.icon{
    width: 7%;
}


.container_read_more .structure h1{
    margin-top: 10px;
    color: #fff;
}

.container_read_more .structure p{
    color: #a5abbb;
}

.container_read_more .structure > a{
    color: #fff;
    font-weight: bold;
}

.work {
    width: 100%;
}

.work_container{
    margin-left: 100px;
    margin-right: 100px;
}

.work-header{
    margin-top: 60px;
}

.work-header h1,
.work-header p{
    text-align: center;
    margin-bottom: 10px;
}

.work-header{
    color: #b7bcc9;
}

.work-header h1{
    color: #505a78;
}

.work-header p > span{
    display: block;
}

.filter-buttons{
    text-align: center;
}

.filter-buttons a {
    font-size: 1.125em;
    font-weight: 400;
    color: #a5abbb;
    text-transform: uppercase;
    border: none;
    padding: .25em 1.5em;
    margin: 0.5em;
    font-weight: bold;
}

.filter-buttons .active{
    color: #505a78;
}


.member {
    background-color: red;
    width: 200px;
    height: 200px;
    background-color: #505a78;
    text-align:center;
    display: inline-block;
    margin: 5px;
}

.name {
    margin-top: 140px;
    margin-right: 20px;
}

.name span{
    margin-top: 100px;
    font-weight: bold;
    color: #505a78;
    font-size: 20px;
}

.name p{
    color: #b7bcc9;
    font-size: 15px;
}



.member img {
    margin: 0 auto 0;
    margin-top: 60px;
    display: block;
    width: 15%;
}

.work-cast{
    margin-top: 20px;
    margin-left: 250px;
}


.bar {
    width: 100%;
    height: 120px;
    background-color: #505a78;
}

.content {
    margin-left: 90px;
    position: absolute;
    margin-top: 30px;
}

.content h3{
    color: #fff;
    font-weight: bold;
}

.content p{
    margin-top: 10px;
    color: #b7bcc9;
}

.content span{
    color: #b7bcc9;
}

.content .container_buttons {
    float: right;
    margin-top: -20px;
    margin-left: 150px;
}

.container_buttons a{
    margin: 10px;
}

.button_same {
    background-color: #505a78;
    padding: 15px 50px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 18px;
    color: #fff;
    border: 3px solid #424d6c;
    font-weight: bold;
}

.button_green {
    background-color: #7cdf95;
    padding: 15px 50px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 18px;
    color: #fff;
    border: 3px solid #424d6c;
    font-weight: bold;
}

.blog_container{
    width: 100%;

    margin-top: 50px;
}

.content_blog h1,
.content_blog p{
    text-align: center;
}

.content_blog h1{
    text-transform: uppercase;
    font-weight: bold;
    color: #505a78;
}

.content_blog p{
    color: #b7bcc9;
}

.content_blog span{
    display: block;
}

._blog{
    width: 120px;
    height: 120px;
    background-color: #505a78;
    text-align:center;
    display: inline-block;
    margin: 5px;
}

._blog img {
    margin: 0 auto 0;
    margin-top: 60px;
    display: block;
    width: 15%;
}

.blog_square{
    margin-left: 250px;
    margin-top: 30px;
    text-align: center;
    display: inline-block;
    margin-right: 250px;
}


._blog h3{
    overflow: hidden;
    position: absolute;
    margin-left: 130px;
    margin-top: -50px;
}

._blog span {
    overflow: hidden;
    position: absolute;
    margin-left: 130px;
    margin-top: -25px;
}

._blog p {
    overflow: hidden;
    position: absolute;
    margin-left: 121px;
    margin-top: -5px;
    font-size: 12px;
}

.subscribe_container {
    margin-top: 50px;
    width: 100%;
    height: 100px;
    background-color: #505a78;
}


.subscribe_container h2 {
    color: #fff;
    margin-left: 110px;
    position: absolute;
    margin-top: 40px;
}


.subscribe_buttons {
    float: right;
    margin-right: 350px;
    margin-top: 50px;
}

.subscribe_buttons .subscribe_green{
    background-color: #7cdf95;
    padding: 2px 12px;
    text-decoration: none;
    color: #fff;
    border: 3px;
    font-weight: bold;
}


.subscribe_buttons .email{
    background-color: #fff;
    padding: 2px 12px;
    text-decoration: none;
    color: #505a78;
    border: 3px;
    font-weight: bold;
}


.porcentage_container{
    margin-top: 60px;
}

.porcentage_container h1,
.porcentage_container p{
    text-align: center;
}

.porcentage_container h1{
    color: #505a78;
}

.porcentage_container p{
   color: #abb1c0;
}


.circles_container ._porcentage{
    margin-top: 110px;
}

1 个答案:

答案 0 :(得分：0)

您可以使用名为Circles（https://github.com/lugolabs/circles）

的jQuery插件

它非常简单，只需创建一个元素并将jQuery类绑定到它。

<div class="circle" id="circles-1"></div>

JS代码看起来像这样

$( document ).ready(function() {
  var myCircle = Circles.create({
    id:                  'circles-1',
    radius:              60,
    value:               43,
    maxValue:            100,
    width:               10,
    text:                function(value){return value + '%';},
    colors:              ['#D3B6C6', '#4B253A'],
    duration:            400,
    wrpClass:            'circles-wrp',
    textClass:           'circles-text',
    valueStrokeClass:    'circles-valueStroke',
    maxValueStrokeClass: 'circles-maxValueStroke',
    styleWrapper:        true,
    styleText:           true
    });
});

您可以在类上添加带CSS的样式（您可以在以下属性wrpClass，textClass，valueStrokeClass，maxValueStrokeClass中定义这些样式）以适合您的设计。

例如： https://jsfiddle.net/amdohhhb/

相关问题
最新问题