用css的clip属性制作环形进度条
  在 HTML/CSS 分类下   暂无评论

用css的clip属性制作环形进度条

  在 HTML/CSS 分类下   暂无评论

图1

css中的clip属性用来裁剪元素。基本用法是 clip:rect(top,right,bottom,left) 。其中top与left的值指的是元素在对应方向要被剪切到的尺寸,right和bottom值指的是元素在对应方向要保留到的尺寸。表达不好,直接看例子吧。

HTML代码:

<div class="outer">
    <div class="left">
        <div class="left-inner"></div>
    </div>
    <div class="right">
        <div class="right-inner"></div>
    </div>
</div>

CSS代码:

.left, .right {
    float: left;
    position: relative;
    width: 50px;
    height: 100px;
    overflow: hidden;
}

.left-inner, .right-inner {
    position: absolute;
    width: 200%;
    height: 100%;
    border: 5px solid yellowgreen;
    border-radius: 50%;
    box-sizing: border-box;
}

.left-inner {
    clip: rect(0,100px,100px,50px);
    animation: rotate 2s 2s linear forwards;
}

.right-inner {
    left: -100%;
    clip: rect(0,50px,100px,0);
    animation: rotate 2s linear forwards;
}

@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(180deg);}
}

浏览器效果如下:

图2
图3

基本原理如下:

  1. 将left-inner与right-inner的样式设置为圆环形状。利用clip属性,将它们剪切为半圆环。其中left-inner为右半环,right-inner为左半环。
  2. right-inner向左偏移100%的距离。left-inner与right-inner的父元素设置overflow:hidden,使left-inner与right-inner一开始不可见。
  3. 为left-inner与right-inner添加animate动画,依次旋转180度,最后形成圆环。

需要注意的是:css3的animate动画,ie10以下不支持,低版本的谷歌,火狐等需要添加前缀。

评论已关闭