CSS3 动画配合clip属性创建圆形进度条动画

最新推荐文章于 2023-10-26 10:46:11 发布

VIP文章失忆意

最新推荐文章于 2023-10-26 10:46:11 发布

阅读量2.9k

点赞数 1

分类专栏： css3 文章标签： css3 动画 clip

本文链接：https://blog.csdn.net/toxic07/article/details/46911537

版权

这里先讲下clip这个css中很少用到的样式，在w3chool是这样描述的

clip 属性剪裁绝对定位元素。
当一幅图像的尺寸大于包含它的元素时会发生什么呢？”clip” 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。

第一句话就很明确的表达了，裁剪元素必须带position:absolute;属性，然后才能使用clip去对图像进行裁剪。语法为

img
{
position:absolute;
clip:rect(0px,60px,200px,0px);//0 60 200 0分别对应上，右，下，左四个方位
}
有关clip的详细说明可以参考：http://www.w3cplus.com/css3/clip.html

下面开始主题。
大概思路如下：
1.先画一个正方形边框，通过border-radius属性使他变成一个圆
2.设置动画效果，通过改变clip的裁剪方式使这个圆慢慢显现。

@-webkit-keyframes craw {
    0% {
        clip:rect(0em,1em,0em,0.5em);/*因为bottom属性为0，也就是一开始是不让他显示，right为1,left为0，显示的是右边那半圆*/
    }
    50%{
   clip:rect(0em,1em,1em,0.5em);/*改变bottom的值使他从上往下慢慢显示到50%的时候停下刚好形成一个半圆*/
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        clip:rect(0em,1em,1em,0em);/*半圆之后开始改变left的值，但是会发现结果是从两段开始像中间合并，这并不是想要的结果，因此加了个旋转动画，虽然结果是有点差距，但是还算成功*/
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}

下面贴上源码：

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta http-equiv="content-type" c

最低0.47元/天解锁文章

失忆意

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 动画配合clip属性创建圆形进度条动画

这里先讲下clip这个css中很少用到的样式，在w3chool是这样描述的 clip 属性剪裁绝对定位元素。当一幅图像的尺寸大于包含它的元素时会发生什么呢？”clip” 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。第一句话就很明确的表达了，裁剪元素必须带position:absolute;属性，然后才能使用clip去对图像进行裁剪。语法为 img
复制链接

扫一扫