查看: 467|回复: 0

[UI界面设计] css3实现环形进度

[复制链接]
发表于 2019-8-30 22:10:12 | 显示全部楼层 |阅读模式
效果图:

20170616160032_17098.gif

html代码:

  1. <div class="rect-box">
  2.         <div class="rect left">
  3.                  <div class="circle"></div>  
  4.         </div>
  5.         <div class="rect right">
  6.                  <div class="circle"></div>  
  7.         </div>
  8. </div>
复制代码

css代码:
  1. .rect-box{
  2.         width: 200px;
  3.         height: 200px;
  4.         /*border: 1px solid #ccc;*/
  5.         box-sizing: border-box;
  6.         position: relative;
  7. }
  8. .rect{
  9.         width: 100px;
  10.         height: 200px;
  11.         box-sizing: border-box;
  12.         position: absolute;
  13.         overflow:hidden;
  14.         top: 0;
  15. }
  16. .left{
  17.         left: 0;
  18. }
  19. .right{
  20.         right: 0;
  21. }
  22. .rect > div{
  23.   width: 200px;   
  24.   height: 200px;   
  25.   border:20px solid transparent;   
  26.   border-radius: 50%;   
  27.   box-sizing: border-box;
  28.   position: absolute;   
  29.   top:0;  
  30.   z-index: 3;
  31.   transform: rotate(45deg);
  32. }
  33. .right .circle{   
  34.   border-top:20px solid #666;   
  35.   border-right:20px solid #666;  
  36.   border-left:20px solid rgb(81, 197, 81);   
  37.   border-bottom:20px solid rgb(81, 197, 81);   
  38.   right:0;   
  39.   -webkit-animation: right 5s linear infinite;   
  40. }   
  41. .left .circle{   
  42.    border-bottom:20px solid #666;   
  43.    border-left:20px solid #666;      
  44.    left:0;   
  45.   -webkit-animation: left 5s linear infinite;  
  46. }   
  47. @-webkit-keyframes right{   
  48.   0%{   
  49.     border-left:20px solid rgb(182, 239, 182);
  50.     border-bottom:20px solid rgb(182, 239, 182);
  51.     -webkit-transform: rotate(45deg);   
  52.   }   
  53.   50%{   
  54.    
  55.     border-left:20px solid rgb(81, 197, 81);   
  56.     border-bottom:20px solid rgb(81, 197, 81);   
  57.     -webkit-transform: rotate(225deg);   
  58.   }   
  59.   100%{   
  60.     border-left:20px solid green;   
  61.     border-bottom:20px solid green;   
  62.     -webkit-transform: rotate(225deg);   
  63.   }   
  64. }   
  65. @-webkit-keyframes left{   
  66.   0%{   
  67.     border-top:20px solid rgb(81, 197, 81);   
  68.     border-right:20px solid rgb(81, 197, 81);  
  69.     -webkit-transform: rotate(45deg);   
  70.   }   
  71.   50%{   
  72.          
  73.     border-top:20px solid rgb(81, 197, 81);   
  74.     border-right:20px solid rgb(81, 197, 81);   
  75.     -webkit-transform: rotate(45deg);   
  76.   }   
  77.   100%{   
  78.     border-top:20px solid green;   
  79.     border-right:20px solid green;   
  80.     -webkit-transform: rotate(225deg);   
  81.   }   
  82. }
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



邮箱:[email protected] QQ:791577401 木子牛HTML5工作室 版权所有

© MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表