title: “CSS 0813-渐变&过渡&变形”
date: 2022-08-15T09:43:28+08:00
文章目录
CSS渐变
CSS3线性渐变
background-image: linear-gradient([渐变方向,]颜色值1,颜色值2,... )
渐变方向
- to bottom 从上往下 (默认值)
- to top 从下往上
- to right 从左往右
- to left 从右往左
- to right top 从左下往右上
- to left bottom 从右上往左下
- 角度: 数值deg 0-360
css3重复性的线性渐变
background-image: repeating-linear-gradient(颜色值 数值px/%,颜色值 数字px/%);
background-image: repeating-linear-gradient(red 30px,blue 50px);代表的意思是:
如果渐变方向是从上往下的,元素的高度是200px的话,将元素高度划分0-200的区间,其中0-30px是红色纯色 30-50px是渐变色 50-200px蓝色纯色 然后将渐变色在该范围内重复出现
css3径向渐变
background-image:radial-gradient([渐变起始位置],颜色值1,颜色值2)
渐变起始位置和背景图位置一样的,但在前面要加个at
at 0 0或at right bottom
css3重复性的径向渐变
限定渐变范围，将其重复出来
background-image:repeating-radial-gradient([渐变起始位置],颜色值1 数值px/%,颜色值2 数字px/%)
过渡属性
-
transition-property:属性名,属性名;需要看到的过渡属性
-
transition-duration:数字s/ms; 过渡执行时间 必须
-
transition-delay:数字s/ms;过渡延迟时间
-
transition-timing-function: ease(慢-快-慢)linear(匀速)过渡执行效果;
-
复合写法 transition: 需要看到的过渡属性 过渡执行时间 过渡延迟时间 过渡执行效果;
- 没有顺序（
过渡执行时间要在过渡延迟时间前面） - 只有过渡执行时间是必须的
- 只有一个时间代表执行时间 两个时间 第一个是执行时间 第二个延迟时间
- 需要看到的过渡属性是多个可以用all(全部属性)来代替,如果不写的话 代表就是all
过渡需要注意的点
- 过渡一般结合hover使用
- 过渡对数值类和颜色类的生效,对display和图片是不生效的
- 过渡属性加到hover里面只有滑过过渡,离开立马回到原来的效果
- 没有顺序（
变形属性
transform属性只能转换由盒模型定位的元素。根据经验，如果元素具有display: block，则由盒模型定位元素。
变形位移
x/y/z轴位移：transform:translateX/Y/Z(数值px/%)
- 其中，X/Y轴的位移正值为从上往下和从左往右且值为百分数时相对的百分数的元素本身，Z轴位移的属性值没有百分数。
X和Y轴位移的复合写法：transform:translate(数值px/%, 数值px/%)
- 表示元素在x轴和y轴两个方向上同时平移
xyz轴位移 transform:translate3d(x,y,z); 三个值必需都写，不位移时值可以为0
形成3d空间 transform-style:flat(2d平面)/preserve-3d(3d空间),一般添加到变形元素的父元素身上
变形旋转
- 单轴旋转 transform:rotateX/Y/Z(数值deg) 顺时针正,逆时针为负
- xy都旋转 transform:rotateX() rotateY(); transform:rotateY() rotateX()两个值顺序有影响，因为旋转后坐标轴会改变
- z轴旋转 transform:rotate()
- xyz都旋转
- transform:rotateX() rotateY() rotate();
- transform:rotate3d(x,y,z,角度) xyz的取值是0或者1 0:不旋转 1:旋转
景深 perspective:数值px; 值越小 距离越近 看到部分越大 加到变形元素父元素身上 一般可以从500这个值开始设
变形原点 transform-origin:水平 垂直; 取值和背景图位置一样的
变形缩放
- 单轴缩放 transform:scaleX/Y/Z(数值) 0:隐藏 1:不缩放 0-1缩小 >1 放大
- xy轴缩放 transform:scaleX() scaleY()
- transform:scale(x,y) 只写一个值代表x和y都缩放(常用)
- xyz轴缩放
- transform:scaleX() scaleY() scaleZ()
- transform:scale3d(x,y,z) 如果没有缩放也要写值,写1
多个变形属性值同时出现的时候,只能写一个属性,多个属性值之间用空格隔开,其次如果有旋转的话，值之间有顺序的，因为旋转后会改变坐标轴的位置
- transform: translateX(400px) rotateY(40deg); 先位移后旋转
- transform: rotateY(40deg) translateX(400px); 先旋转 在新的坐标轴上进行位移
变形倾斜
css3变形倾斜 只有xy轴的倾斜
- 单轴倾斜 transform:skewX/Y(数值deg)
- xy都倾斜 transform:skew(x,y)
perspective视域函数
视域为元素赋予前后深度，这种深度可以通过perspective来设定，可以将他想象成一个摄像头，具体物体的远近不同，而显示出不同的3D角度。
视域值必须为正。perspective函数在变形函数列表中的位置十分重要。放在首位，至少应该放在依赖视域的变形之前。
定义视域，属性值为一个长度，定义视域锥体的深度，但是perspective属性是将定义的视域深度应用的目标元素的所有子元素上。多数时候，应该使用perspective属性。
transform-origin:水平 垂直;原点
两个或者三个关键字，用于定义相对于哪个点变形；横轴和纵轴可以使用英文关键字top，right等。也可以是长度值，百分数等。未设置值前，元素的原点默认在元素的几何中心。其中平移函数不会收到原点到定位影响。
处理背面
在使用3D变形过程中，我们可能会看到元素的背面，使用backface-visibility决定元素的背面朝向我们的生活是否渲染背面，仅此而已。
backface-visibility:visible;背面可视backface-visibility:hidden;背面不可视
3D变形方式
默认情况下，不管怎样变形，得到的结果都是扁平的，可以使用transform-style属性来修改。
transform-style:flat;
transform-style: preserve-3d;
transform参考：https://juejin.cn/post/6911009814206218254
补充
三角形写法：
<!-- html代码 -->
<div></div>
/* css代码 */
div{
width:0px;height: 0px;
border: 20px solid transparent;/* transparent为透明色 */
border-bottom: 20px solid red;/* 方向可以任意更改 */
}
结果：
border-image属性
border-image: source slice width outset repeat|initial|inherit;
| 值 | 描述 |
|---|---|
border-image-source |
用于指定要用于绘制边框的图像的位置 |
border-image-slice |
图像边界向内偏移 |
border-image-width |
图像边界的宽度 |
border-image-outset |
用于指定在边框外部绘制 border-image-area 的量 |
border-image-repeat |
用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。 |
第五种居中方法
<!-- html代码 -->
<div class="box">
<div class="center"></div>
</div>
/* css代码 */
.box{
width: 400px;
height: 400px;
margin: auto;
background-color: pink;
position: relative;
}
.center {
width: 100px;height: 100px;
position: absolute;
left: 50%;top: 50%; /* 参考父元素宽高 */
background-color: aqua;
transform: translate(-50%,-50%); /* 参考自己本身的宽高 */
}
结果
易知，该居中方法是由定位和变形位移属性共同形成的结果