Css 實現半圓進度條展現功能

1、方案1、使用border方式處理

css

 .block { width: 200px; height: 200px; border-left: 10px solid red; border-top: 10px solid red; border-right: 10px solid gray; border-bottom: 10px solid gray; border-radius: 50%; box-sizing: border-box; position: absolute; top: 50%; transition: all ease 0.8s;
        } .blockOut { width: 200px; height: 200px; background: #ddd; position: relative; overflow: hidden;
        } .block.rotate1 { transform: rotate(-45deg);
        } .text { text-align: center; top: 75%; position: absolute; width: 100%;
        }

 

html

<div class="blockOut">
        <div class="block rotate1"></div>
        <div class="text"> 50% </div>
    </div>

js

var isStart = true; $(window).click(function () { if (isStart) { $('.block').css({ 'transform': 'rotate(45deg)' }); } else { $('.block').css({ 'transform': 'rotate(-45deg)' }); } isStart=!isStart; });

 

2、方案二

待完善...

 

 

更多：

CSS3實現文本垂直排列-writing-mode

border-radius實例2

CSS Blur() 將高斯模糊應用於輸出圖片