返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

jquery插件canvaspercent.js实现百分比圆饼效果

2020-05-18 09:01:00易采站长站整理


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Pragma" content="no-cache">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
  <meta name="format-detection" content="telephone=no"/>
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
  <title>demo01</title>
  <style type="text/css">
    div{margin:.1rem .2rem;background:#eee;padding:.3rem}
    div span{display:block;float:right;margin:.22rem 2rem 0 0;font-size:.4rem;font-family:microsoft yahei}
    div canvas{
      -webkit-transform: rotateZ(-270deg);
      transform:rotateZ(-270deg);
      -webkit-animation:ani01 1s ease 0s both;
      animation:ani01 1s ease 0s both;
    } 
    @-webkit-keyframes ani01 {
      0%{
        -webkit-transform:scale(.5,.5) rotateZ(-270deg);
        transform:scale(.5,.5) rotateZ(-270deg);
      }
      100%{
        -webkit-transform:scale(1,1) rotateZ(-90deg);
        transform:scale(1,1) rotateZ(-90deg);
      }
    }
    @keyframes ani01 {
      0%{
        -webkit-transform:scale(.5,.5) rotateZ(-270deg);
        transform:scale(.5,.5) rotateZ(-270deg);
      }
      100%{
        -webkit-transform:scale(1,1) rotateZ(-90deg);
        transform:scale(1,1) rotateZ(-90deg);
      }
    }
  </style>
</head>
<body> 
<div>
  <canvas data-percent="80" class="perCanvas">
    您的浏览器不支持canvas标签。
  </canvas>
  <span>第一章：进度 80%</span>
</div>
<div>
  <canvas data-percent="50" class="perCanvas">
    您的浏览器不支持canvas标签。
  </canvas>
  <span>第一章：进度 50%</span>
</div>
<div>
  <canvas data-percent="75" class="perCanvas">
    您的浏览器不支持canvas标签。
  </canvas>
  <span>第一章：进度 75%</span>
</div>
<div>
  <canvas data-percent="35" class="perCanvas">
    您的浏览器不支持canvas标签。
  </canvas>
  <span>第一章：进度 35%</span>
</div>
<div>
  <canvas data-percent="95" class="perCanvas">
    您的浏览器不支持canvas标签。
  </canvas>
  <span>第一章：进度 95%</span>
</div>
<div>
  <canvas data-percent="13" class="perCanvas">
    您的浏览器不支持canvas标签。
  </canvas>
  <span>第一章：进度 13%</span>
</div> 
<script type="text/javascript" src="js/flexible.js"></script>
相关文章 大家在看