css clip & clip-path

2018-12-11 本文已影响0人槑小姐_1419

学习笔记-css

clip & clip-path

功能：隐藏对象的一部分，显示剩余的部分
例如

image.png

开始举栗子学习

原型裁剪已经被舍弃的clip 属性
遗弃原油
1. clip 属性剪裁绝对定位元素。只能裁剪绝对元素不是绝对的不可以

clip:rect (top, right, bottom, left)
clip:rect (10px, 20px, 30px, 40px)

10px 为到元素顶部的距离*
20px 为到元素右边的距离*
30px 为到元素底部的距离*
40px 为到元素下边的距离

css html代码

 .clip-me{
        width: 400px;
        height: 200px;
        background-image: url(img/111.jpg);
        clip: rect(100px,200px,300px,40px);
    }
    .clip2-me{
        position: fixed;
        top: 300px;
        width: 400px;
        height: 200px;
        background-image: url(img/111.jpg);
        clip: rect(100px,200px,300px,40px);
    }

<body>
    非绝对元素   没有任何反应  
    <div class="clip-me"></div>    
    绝对元素   被裁剪
    <div class="clip2-me"></div>

</body>

栗子1chorme 70

clip-path css3属性

以上方法已被遗弃了
现使用 clip-path方法代替借鉴了SVG的clipPath 功能更加强大主要可以裁剪路径而不仅仅是正方形

浏览器支持

2018.12.11

使用效果

可以查看 clip-path在线神器 - http://bennettfeely.com/clippy

clip-path 的使用方法

基本语法

<clip-source> | [ <basic-shape> || <geometry-box> ] | none

/属性说明/
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

<basic-shape>四种方法

inset():矩形可以绘制圆角

    //语法
   inset()可以传入5个参数，分别对应top,right,bottom,left的裁剪位置,round radius（可选，圆角）
    //示例
     clip-path: inset(2em 3em 2em 1em round 2em);
    clip 的替代 
     clip:rect(30px 200px 200px 20px)   =   clip-path: inset(30px (256-200)px (191-200)px 20px)

circle() : 定义一个圆。

//语法
circle( [ <shape-radius> ]? [ at <position> ]? )
//说明
circle()可以传人2个可选参数；
1. 圆的半径，默认元素宽高中短的那个为直径，支持百分比
2. 圆心位置，默认为元素中心点
//半径公式
如果半径使用百分比：圆的半径 = (sqrt(width^2+height^2)/sqrt(2)) * 百分比 

//示例
clip-path: circle(30% at 150px 120px);

3 ellipse() : 定义一个椭圆。

//语法
ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
//说明
ellipse()可以传人3个可选参数；
1. 椭圆的X轴半径，默认是宽度的一半，支持百分比
2. 椭圆的Y轴半径，默认是高度的一半，支持百分比
3. 椭圆中心位置，默认是元素的中心点

//示例
clip-path: ellipse(45% 30% at 50% 50%);

4.polygon() : 定义一个多边形。

//语法
polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
//说明
<fill-rule>可选，表示填充规则用来确定该多边形的内部。可能的值有nonzero和evenodd,默认值是nonzero
后面的每对参数表示多边形的顶点坐标（X,Y），也就是连接点

//示例
clip-path: polygon(50% 0,100% 50%,0 100%);

栗子

代码

    .clip-path{
        width: 400px;
        height: 200px;
        background-image: url(img/111.jpg);
    }
    .clip-path1{
        clip-path: inset(20px 40px 20px 40px round 2em)
    }
    .clip-path2{
        clip-path: circle(30% at 200px 100px)
    }
    .clip-path3{
        clip-path: ellipse(45% 30% at 50% 50%)
    }
    .clip-path4{
        clip-path: polygon(50% 0,100% 50%,0 100%)
    }

    cilp-path   inset()
    <div class="clip-path clip-path1"></div>
    cilp-path   circle()
    <div class="clip-path clip-path2"></div>
    cilp-path   ellipse()
    <div class="clip-path clip-path3"></div>
    cilp-path   polygon()
    <div class="clip-path clip-path4"></div>

image.png

异形可以随意玩耍有种抠图的快感
坐标点不好找形状可以在线绘画形状

我画了什么，我也不知道

加上动画效果

代码

.clip-path2{
        transition: 0.4s cubic-bezier(1, -1, 0, 2);
        clip-path: circle(30% at 200px 100px)
    }
  .clip-path2:hover{
        clip-path: circle(20% at 200px 100px)
    }

    原型动画效果
    <div class="clip-path clip-path2"></div>

emm不知道怎么截动图

image.png

emm

动画效果

transition 使用
cubic-bezier是控制变化的速度曲线 (贝塞尔曲线)
- 运行的时间函数

语法：

**animation-timing-function**：<single-animation-timing-function>,<single-animation-timing-function>*

**<single-animation-timing-function>** = ease | linear | ease-in 
| ease-out | ease-in-out | step-start | step-end | steps|| cubic-bezier(<number>, <number>, <number>,<number>)

css clip & clip-path

clip & clip-path

clip-path css3属性

浏览器支持

使用效果

clip-path 的使用方法

栗子

猜你喜欢

热点阅读