zoukankan      html  css  js  c++  java
  • css3实现饼状图进度及环形进度条


    1
    <!-- 饼图 --> 2 <div class="pie"></div> 3 4 <hr /> 5 6 <!-- 环形图 --> 7 <div class="ring"> 8 <div class="child-ring"></div> 9 <div class="left"> 10 <div class="left-c"></div> 11 </div> 12 <div class="right"> 13 <div class="right-c"></div> 14 </div> 15 </div> 1
    /* 饼图进度样式开始 */
      2             .pie {
      3                 width: 100px;
      4                 height: 100px;
      5                 border-radius: 50%;
      6                 background: #1D7DB1;
      7                 background-image: linear-gradient(to right, transparent 50%, #9ACD32 0);
      8 
      9                 /* 线性渐变 */
     10                 /* background: linear-gradient(direction, color-stop1, color-stop2, ...); */
     11 
     12                 /* 径向渐变 */
     13                 /* background: radial-gradient(shape size at position, start-color, ..., last-color); */
     14             }
     15 
     16             .pie::before {
     17                 content: '饼';
     18                 display: block;
     19                 margin-left: 50%;
     20                 height: 100%;
     21                 /* 继承.pie的背景色 */
     22                 background-color: inherit;
     23                 color: #fff;
     24                 display: flex;
     25                 justify-content: center;
     26                 align-items: center;
     27                 border-radius: 0 50px 50px 0;
     28                 transform-origin: left;
     29                 transform: rotate(1deg);
     30                 animation: spin 6s linear infinite, bg 12s step-start infinite;
     31                 /* step-start/step-end 动画瞬变 */
     32             }
     33 
     34             @keyframes spin {
     35                 to {
     36                     transform: rotate(180deg);
     37                 }
     38             }
     39             @keyframes bg {
     40                 50% {
     41                     background: #9ACD32;
     42                 }
     43             }
     44 
     45 /* 饼图进度样式结束 */
     46 
     47 /* 环形进度条开始 */
     48             .ring {
     49                 width: 100px;
     50                 height: 100px;
     51                 background: #9ACD32;
     52                 border-radius: 50px;
     53                 position: relative;
     54             }
     55             /* 环形进度条 */
     56             .child-ring{
     57                 width: 100%;
     58                 height: 100%;
     59                 background-color: inherit;
     60                 border: 6px solid #1D7DB1;
     61                 box-sizing: border-box;
     62                 border-radius: 50%;
     63             }
     64             /* 左边遮罩 */
     65             .left{
     66                 width: 50%;
     67                 height: 100%;
     68                 position: absolute;
     69                 top: 0;
     70                 left: 0;
     71                 background-color: transparent;
     72                 border-radius: 50px 0 0 50px;
     73                 overflow: hidden;
     74             }
     75             .left-c{
     76                 width: 100%;
     77                 height: 100%;
     78                 background-color: #9ACD32;
     79                 border-radius: 50px 0 0 50px;
     80                 
     81                 /* 动画  左半部延时6s执行*/
     82                 transform-origin: right;
     83                 transform: rotate(0deg);
     84                 animation: ring 6s 6s linear 1;
     85                 /* 动画保持最后一个状态 */
     86                 animation-fill-mode: forwards;
     87             }        
     88             /* 右边遮罩 */
     89             .right{
     90                 width: 50%;
     91                 height: 100%;
     92                 position: absolute;
     93                 top: 0;
     94                 right: 0;
     95                 background-color: transparent;
     96                 border-radius: 0 50px 50px 0;
     97                 overflow: hidden;
     98             }
     99             .right-c{
    100                 width: 100%;
    101                 height: 100%;
    102                 background-color: #9ACD32;
    103                 border-radius: 0 50px 50px 0;
    104                 
    105                 /* 动画 */
    106                 transform: rotate(0deg);
    107                 transform-origin: left;
    108                 animation: ring 6s linear 1;
    109                 animation-fill-mode: forwards;
    110             }
    111             @keyframes ring {
    112                 to{
    113                     transform: rotate(180deg);
    114                 }
    115             }
    116 /* 环形进度条结束 */

  • 相关阅读:
    Struts2(五)——核心拦截器
    Struts2(四)——页面相关内容
    Struts2(三)——数据在框架中的数据流转问题
    Python Day 1
    c++-STL:删除子串
    九度1165:字符串匹配
    九度1051:数字阶梯求和
    数据结构之二叉树基础三
    数据结构之二叉树基础二
    数据结构之二叉树基础一
  • 原文地址:https://www.cnblogs.com/mp1994/p/10826079.html
Copyright © 2011-2022 走看看