• clip-path实现loading圆饼旋转效果以及其他方法


    一、loading效果

    二、clip-path

    css中的剪切clip-path属性是CSS Masking模块的一部分。

    矩形

    clip-path:inset(top right bottom left round top-raduis right-radius bottom-radius left-radius);

    例子:

    原图

    (690x1035)

    .clipPath{
        -webkit-clip-path:inset(50px 30px 300px 100px round 0% 0% 0% 0%);
    }

    剪切结果如下:

    (图手动缩小,太大了)

    .clipPath{
        -webkit-clip-path:inset(130px 70px 300px 100px round 50% 0% 0% 0%);
    }

    效果这样:

    .clipPath{
        -webkit-clip-path:inset(130px 70px 300px 100px round 0% 50% 0% 0%);
    }

      

    .clipPath{
        -webkit-clip-path:inset(130px 70px 300px 100px round 0% 0% 50% 0%);
    }

    .clipPath{
        -webkit-clip-path:inset(130px 70px 300px 100px round 0% 0% 0% 50%);
    }

    .clipPath{
        -webkit-clip-path:inset(130px 70px 300px 100px round 50% 10% 50% 10%);
    }

    clip-path:inset(top right bottom left);

    其中前四个参数的值大小对应的则是距离原始元素的4个边的距离

    圆形

    clip-path:circle(radius at x-axis y-axis);//radius表示半径大小,x-axis和y-axis表示圆心坐标(原图的坐标点)

    .clipPath{
        -webkit-clip-path:circle(230px at 350px 310px);
    }

    椭圆

    clip-path:ellipse(x-rad y-rad at x-axis y-axis);

    其中x-rad,y-rad分别表示椭圆的长半轴和短半轴

    .clipPath{
        -webkit-clip-path:ellipse(230px 180px at 350px 310px);
    }

    最喜欢的就是下面的技能

    多边形

     clip-path:polygon(x1 y1,x2,y2,x3,x3,...,xn yn);

    根据坐标点围城的图形进行剪切

        .star{
    -webkit-clip-path
    :polygon(50% 0%,63% 38%,100% 38%,69% 59%,82% 100%,50% 75%,18% 100%,31% 59%,0 38%,37% 38%); width:200px; height:200px; background-color: cornflowerblue; }

    三、loading效果实现思路

    用两个div进行实现:

    将浅颜色的圆放在深颜色的圆上面,下面深颜色的圆不动,大小不变,上面浅颜色的圆由小变大,形成loading的旋转效果。

    .circleCakeTop{
        background-color: #FB8BBD;
        border-radius:50%;//矩形变成圆形
        width: 60px;
        height: 60px;
        position: absolute;
        top:15px;
        left:15px;
        animation:circleCake 2s linear infinite;
        -webkit-animation:circleCake 2s linear infinite;
        transform:rotate(45deg);//旋转45度,从90度开始画圆
    }
    @keyframes circleCake{
    
        0%{
            -webkit-clip-path: polygon(30px 30px,0 0px,0px 0,0px 0px,0 0px,0 0px);
            -moz-clip-path: polygon(30px 30px,0 0px,0px 0,0px 0px,0 0px,0 0px);
            -o-clip-path: polygon(30px 30px,0 0px,0px 0,0px 0px,0 0px,0 0px);
            -ms-clip-path: polygon(30px 30px,0 0px,0px 0,0px 0px,0 0px,0 0px);
            clip-path: polygon(30px 30px,0 0px,0px 0,0px 0px,0 0px,0 0px);//刚开始时候是(30px 30px)-(0px 0px)的一个直线就是没有剪切
        }
        12.5%{
            -webkit-clip-path: polygon(30px 30px,0 0,60px 0,60px 0,60px 0,60px 0);
            -moz-clip-path: polygon(30px 30px,0 0,60px 0,60px 0,60px 0,60px 0);
            -ms-clip-path: polygon(30px 30px,0 0,60px 0,60px 0,60px 0,60px 0);
            -o-clip-path: polygon(30px 30px,0 0,60px 0,60px 0,60px 0,60px 0);
            clip-path: polygon(30px 30px,0 0,60px 0,60px 0,60px 0,60px 0);//顺时针1/4圆,动画完成
        }
        25%{
            -webkit-clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,60px 60px,60px 60px);
            -moz-clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,60px 60px,60px 60px);
            -ms-clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,60px 60px,60px 60px);
            -o-clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,60px 60px,60px 60px);
            clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,60px 60px,60px 60px);//1/4圆到半圆
        }
        37.5%{
            -webkit-clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,0 60px,0px 60px);
            -moz-clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,0 60px,0px 60px);
            -ms-clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,0 60px,0px 60px);
            -o-clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,0 60px,0px 60px);
            clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,0 60px,0px 60px);//半圆到3/4圆
        }
        50%{
            -webkit-clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,0 60px,0px 0px);
            -moz-clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,0 60px,0px 0px);
            -ms-clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,0 60px,0px 0px);
            -o-clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,0 60px,0px 0px);
            clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,0 60px,0px 0px);//3/4圆到整圆
        }
        62.5%{
            -webkit-clip-path: polygon(30px 30px,60px 0px,60px 0,60px 60px,0 60px,0px 0px);
            -moz-clip-path: polygon(30px 30px,60px 0px,60px 0,60px 60px,0 60px,0px 0px);
            -ms-clip-path: polygon(30px 30px,60px 0px,60px 0,60px 60px,0 60px,0px 0px);
            -o-clip-path: polygon(30px 30px,60px 0px,60px 0,60px 60px,0 60px,0px 0px);
            clip-path: polygon(30px 30px,60px 0px,60px 0,60px 60px,0 60px,0px 0px);//整圆到3/4圆
        }
        75%{
            -webkit-clip-path: polygon(30px 30px,60px 60px,60px 60px,60px 60px,0 60px,0px 0px);
            -moz-clip-path: polygon(30px 30px,60px 60px,60px 60px,60px 60px,0 60px,0px 0px);
            -ms-clip-path: polygon(30px 30px,60px 60px,60px 60px,60px 60px,0 60px,0px 0px);
            -o-clip-path: polygon(30px 30px,60px 60px,60px 60px,60px 60px,0 60px,0px 0px);
            clip-path: polygon(30px 30px,60px 60px,60px 60px,60px 60px,0 60px,0px 0px);//3/4圆到半圆
        }
        87.5%{
            -webkit-clip-path: polygon(30px 30px,0px 60px,0px 60px,0px 60px,0 60px,0px 0px);
            -moz-clip-path: polygon(30px 30px,0px 60px,0px 60px,0px 60px,0 60px,0px 0px);
            -ms-clip-path: polygon(30px 30px,0px 60px,0px 60px,0px 60px,0 60px,0px 0px);
            -o-clip-path: polygon(30px 30px,0px 60px,0px 60px,0px 60px,0 60px,0px 0px);
            clip-path: polygon(30px 30px,0px 60px,0px 60px,0px 60px,0 60px,0px 0px);//半圆到1/4圆
        }
        100%{
            -webkit-clip-path: polygon(30px 30px,0 0px,0px 0,0px 0px,0 0px,0 0px);
            -moz-clip-path: polygon(30px 30px,0px 0,0px 0,0px 0px,0 0px,0 0px);
            -ms-clip-path: polygon(30px 30px,0px 0,0px 0,0px 0px,0 0px,0 0px);
            -o-clip-path: polygon(30px 30px,0px 0,0px 0,0px 0px,0 0px,0 0px);
            clip-path: polygon(30px 30px,0px 0,0px 0,0px 0px,0 0px,0 0px);//1/4圆到刚开始的状态
        }
    }

    实际的浅颜色圆是由矩形的border-radius:50%属性变成圆形。

     注意:自己在编码过程中,为了省劲,有的0后没有加px,导致3/4圆到整圆时候出现错误,加上px后效果正确。严谨一些,以后都加上px。(但是还不知道是为什么)

    以上自己的方法,兼容性不好,-webkit-内核的浏览器支持的比较好,FireFox支持的效果很不好,IE就更别说了。

    其他方法就需要动一下脑子,张鑫旭大神的一篇博客中提到的方法很好,我是没有想到,多多学习。

    链接:http://www.zhangxinxu.com/wordpress/?p=4144

  • 相关阅读:
    [android] 安卓消息推送的几种实现方式
    二进制部署 Kubernetes 集群
    nginx location反向代理不对等时的处理
    CentOS7用阿里云Docker Yum源在线安装Docker 17.03.2
    Harbor作为Docker的镜像中心
    Harbor 使用 Helm 一键安装
    MYSQL Innodb逻辑存储结构
    安装Redis 4.0单实例
    Redis慢查询日志
    创建Python数据分析的Docker镜像+Docker自定义镜像commit,Dockerfile方式解析+pull,push,rmi操作
  • 原文地址:https://www.cnblogs.com/deerfig/p/6640552.html
Copyright © 2020-2023  润新知