学习笔记-css
clip & clip-path
功能：隐藏对象的一部分，显示剩余的部分
例如
image.png
开始举栗子学习
- 原型裁剪 已经被舍弃的clip 属性
遗弃原油- 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>)
