CSS3

边框图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
width: 200px;
height: 200px;
border: 30px solid pink;
box-sizing: border-box;
border-image: url(./img/border1.png);
/* 切割 */
border-image-slice: 30 fill;
/* 背景图会被拉升 */
border-image-repeat: stretch;

/* 将内容缩放进行完整的重复平铺 使得能够正好放下若干元素 */
border-image-repeat: round;

/* 背景会被直接平铺 */
border-image-repeat: repeat;

/* 设置边框图片的宽度 */
border-image-width: 30px;

/* 将背景图延伸到盒子外 不会放大 只会延伸 */
/*放大中间部分*/
border-image-outset: 100px;

颜色渐变

简单渐变

简单线性渐变 linear-gradient

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box1{
    width: 400px;
    height: 800px;
    margin: 10px auto;
    /*linear-gradient(方向，开始颜色位置，颜色2位置，颜色3位置...)
    1. to left：设置渐变为从右到左。相当于: 270deg;
    2. to right：设置渐变从左到右。相当于: 90deg;   
    3. to top：设置渐变从下到上。相当于: 0deg;
    4. to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。也可以直接指定度数，如45deg
    */
    background: linear-gradient(to right,pink,skyblue,yellowgreen,orange);
    background: linear-gradient(20deg,pink,skyblue,yellowgreen,orange);
    background: linear-gradient(-20deg,pink,skyblue,yellowgreen,orange);
}

简单径向渐变radial-gradient

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.box2{
    width: 400px;
    height: 800px;
    margin: 10px auto;
    /* radial-gradient(·形状 大小 坐标·,颜色1，颜色2...) */

    /* 圆形 */
    background: radial-gradient(circle at center,pink,skyblue,yellowgreen,orange);
    /* background: radial-gradient(circle at 200px 100px,pink,skyblue,yellowgreen,orange); */

    /* 0%至10%是red渐变至green  10%至100%是green渐变至yellow */
    background: radial-gradient(circle at 100px 100px,red 0%,green 10%,yellow 100%);

    /* 椭圆 */
    background: radial-gradient(ellipse at center,pink,skyblue,yellowgreen,orange);
    /* 0%至20%是pink渐变至skyblue  20%至40%是skyblue渐变至yellowgreen  40%之后是纯yellowgreen */
    background: radial-gradient(ellipse at 10px 100px,pink 0%,skyblue 20%,yellowgreen 40%);

    /* 参数加入大小 */
    /*
    closest-side：最近边；  
    farthest-side：最远边； 
    closest-corner：最近角；  
    farthest-corner：最远角。默认是最远的角farthest-corner  
    */

    /* 渐变的范围边缘触及最近的border结束 */
    background: radial-gradient(circle closest-side at 100px 100px,pink,skyblue,yellowgreen,orange);
    /* 渐变的范围边缘触及最远的border结束 */
    background: radial-gradient(circle farthest-side at 100px 100px,pink,skyblue,yellowgreen,orange);
    /* 渐变的范围边缘触及最近的角结束 */
    background: radial-gradient(circle closest-corner at 100px 100px,pink,skyblue,yellowgreen,orange);
    /* 渐变的范围边缘触及最圆的角结束 */
    background: radial-gradient(circle farthest-corner at 10px 500px,pink,skyblue,yellowgreen,orange);
}

重复渐变

重复线性渐变repeating-linear-gradient

1
2
3
4
5
6
7
8
9
10
11
/* 重复渐变 */
.box3 {
    width: 400px;
    height: 800px;
    margin: 10px auto;
    /*线性重复性渐变
    repeating-linear-gradient(角度,颜色1 %0,颜色2 %10)
    */
    background: repeating-linear-gradient(45deg,red 0%,red 3%,orange 3%,orange 6%,yellow 6%,yellow 9%,green 9%,green 12%,blue 12%,blue 15%,indigo 15%,indigo 18%,purple 18%,purple 21%); */
    /* background: repeating-linear-gradient(45deg,#fff 0px,#fff 2px,#000 2px,#000 4px); */
}

重复径向渐变repeating-radial-gradient

1
2
3
4
5
6
7
8
.box4{
    width: 400px;
    height: 800px;
    margin: 10px auto;
    /*径向的重复性渐变
    repeating-radial-gradient(形状 终点位置 at 起点位置,颜色1 0%,颜色2 5%,颜色3 10%)
    */
    background: repeating-radial-gradient(circle farthest-corner at 10px 20px,red 0%,red 3%,orange 3%,orange 6%,yellow 6%,yellow 9%,green 9%,green 12%,blue 12%,blue 15%,indigo 15%,indigo 18%,purple 18%,purple 21%);

玩法

多次使用渐变，利用透明度，达到交叉效果

1
background: repeating-linear-gradient(45deg,rgba(0,0,0,.5) 0%,rgba(255,255,255,.5) 10%),repeating-linear-gradient(-45deg,rgba(0,0,0,.5) 0%,rgba(255,255,255,.5) 10%);
1
2
	background: repeating-radial-gradient(circle farthest-corner at left top,rgba(0,0,0,.5) 0%,rgba(255,255,255,.5) 10%),repeating-radial-gradient(circle farthest-corner at right top,rgba(0,0,0,.5) 0%,rgba(255,255,255,.5) 10%);
}

渐变色

transition

1
2
3
4
5
6
transition: 要过渡的属性  花费时间  运动曲线  何时开始;
/*可以一次性设置，也可以分开设置*/
	transition-property : 设置哪个属性要进行动画
	transition-duration: 设置动画的时间
	transition-timing-function : 设置动画运动的曲线(linear  ease  ease-in  ease-out  ease-in-out)
	transition-delay : 设置动画延迟的时间

CSS 2D变形

translate(x, y)

1
2
transform: translate(100px,100px);
transform: translateX(100px);

缩放 scale(x, y)

1
transform:scale(0.8,2.0);  //宽  高

旋转 rotate(deg)

​ 注意设置旋转中心点的时候不要设置在hover上

1
2
3
transform:rotate(45deg);   //如果是正数，则顺时针，否则为逆时针
transform-origin: left top; //默认为center
transform-origin: 10px 100px;

倾斜 skew(deg, deg)

1
transform:skew(45deg);

​ 注意点角度不要是90的奇数整倍数，因为skew时，元素的高度是不发生变化的，当倾斜90度时元素的斜边要水平（上下边要与左右边重合）与高度不为零冲突，元素动画会 鬼畜

添加多个变形动画时用空格隔开，如

1
transform: rotate(45deg) translateX(100px);

坐标系问题

下面两种的效果是不同的

1
2
（1）transform: rotate(45deg) translateX(100px); 
（2）transform: translateX(100px) rotate(45deg);

这是因为元素在进行2D变化时是根据坐标轴的，而旋转和缩放会改变坐标轴，发生意想不到的结果。但好好利用可以做出好的动画效果。

1
transform: rotate(700deg) translateX(100px); /*达到蜗牛旋转效果*/

盒子居中的方法

盒子水平居中的办法

​ 1、text-align: center

​ 2、margin: auto; 元素需要时block

盒子垂直居中的办法

​ 1、line-height

​ 2、padding

盒子垂直水平居中的方法

利用transform让盒子垂直水平居中

1
2
3
4
5
6
7
8
9
width: 200px;
height: 200px;
background-color: red;
position: absolute;
/*transform 百分比参照的是元素本身的宽高*/
transform: translate(-50%,-50%); 
/*left和top参照的是父容器宽高的50%*/
left: 50%;
top:50%;

利用margin

1
2
3
4
5
6
7
position:fixed;
width:200px;
height:200px;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;

calc和定位的组合使用

1
2
top: calc(50% - 元素高度/2);
left: calc(50% - 元素宽度/2);

background

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*
	有：	background-color		背景颜色
		background-image		背景图片地址
		background-repeat		是否平铺  查手册了解其取值
		background-position		背景位置   	查手册了解其取值 left right center top bottom  两两搭配
											使用方位名词时，前后无顺序要求；但是使用数字10px 10px时注意前后顺序
		background-attachment	背景固定还是滚动
*/
div{
    width: 400px;
    height: 400px;
    background-color: skyblue;
    background-repeat: no-repeat;/*大小自适应充满*/
    background-image: url(../img/girl.jpg);
    background-size: 200px;
    background-position: center;
    /*background-position: 30px 10px;第一个值为X轴 第二个值为Y轴    其中网页顶端为X轴  右为正方向   左边为Y轴  下为正方向*/
    /*background-position: 10px center;*/
}

背景缩放

1
2
3
4
5
6
7
8
9
10
div{
    width: 800px;
    height: 500px;
    background: #000 url(../img/王者荣耀背景图.jpg) no-repeat top center;
    /*background-size: 100px 100px;     设置两个属性值可能导致图片失真扭曲
    background-size: 100px;   尽量使用一个属性值 另一个属性值会等比例缩放*/
    /*background-size: 50%;     使用一个值 另一个值等比例缩放*/
    background-size:cover;     /*会自动  |等比例缩放|  保证图片充满容器 但有可能图片溢出导致部分图片无法显示  【最常用】*/
    /*background-size:contain;    等比例缩放，过程中图片的高度或者宽度任意一个属性值满足容器高宽时就停止缩放，保证图片完整性，但可能无法充满容器*/
}

多背景

1
2
3
4
5
6
7
8
9
10
11
12
13
/*一个元素可以设置多重背景图像；
	每组属性之间使用逗号分隔
	如果设置的多重背景图之间存在交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上
	为了避免背景色将图像盖住，背景色通常都定义在最后一组上。*/
div{
    width: 500px;
    height: 500px;
    /*background: pink url(../img/水浒传.jpg) no-repeat fixed center center;  此处添加fixed后 该图片便以body为容器*/

    background: url(../第1阶段HTML/img/水浒传.jpg) no-repeat left top,
        url(../第1阶段HTML/img/三国演义.jpg) no-repeat right bottom pink;/*当一个div中需要出现多个背景图片时 中间用逗号隔开。值得注意的是：背景色的设置要放在最后一个设置中，不然会覆盖之前的图片效果*/

}

凹凸文字

1
2
3
4
5
6
7
/*凸起*/
/*text-shadow:水平位置 垂直位置 模糊位置 阴影颜色  右和下为正方向*/
text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff;

/*凹下*/
/*text-shadow:水平位置 垂直位置 模糊位置 阴影颜色  右和下为正方向*/
text-shadow: 1px 1px 1px #fff,-1px -1px 1px #000;

景深

观察距离

景深

1
perspective:1000px; /*设置视角与投射面的距离*/
注意的是：若要给某元素设置景深效果，那么perspective要设置在他的父元素上

分别设置 transform: translateZ()后的效果

1
transform: translateZ(0px);
1
transform: translateZ(500px);
1
transform: translateZ(999px);
1
transform: translateZ(1001px);

视角观察点

观察点

默认为中心（center center）

1
2
perspective-origin: left top;/*是body的左上角*/
perspective-origin: 0px 0px; /*也可以精确化垂点*/

利用景深达到伪3d效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body {
    perspective: 1000px;
    /*设置视角观察方向 且是相对于body的，且视角是一直垂直与body的*/
    perspective-origin: left top;/*是body的左上角*/
}

.box {
    width: 200px;
    height: 200px;
    border: 2px solid black;
    /*transition 设置过渡动画*/
    transition: all  1s;
}

.box1:hover {
    transform: translateZ(500px);
}
1
<div class="box box1"></div>

当鼠标移动到box上时触发 transform: translateZ(500px); 致使box在他的Z轴上正方向移动500px;而他的父元素body设置了观察点为body的左上角，则box的移动轨迹是向右下角的。

3d变形

(注：3d变形结合景深后可以呈现空间立体效果。)

每个元素都有自己的坐标系

3d坐标系

translate3d(x,y,z)

例：

1
2
3
4
.box1 {
	transform: translate3d(100px,-50px,500px);
}
/*向x轴正方向移动100px 向y轴负方向移动50px  向z轴正方向移动500px*/

rotate3d(x,y,z,angle)

[x,y,z]向量，定义旋转轴；

angle定义旋转角度，正值为顺时针，负值为逆时针；

​ 关于向量的运作原理

1560564644997

[x,y,z]向量为[0,0,1]时代表z轴，旋转绕z轴旋转

[x,y,z]向量为[0,1,0]时代表y轴，旋转绕y轴旋转

[x,y,z]向量为[1,0,0]时代表x轴，旋转绕x轴旋转

[x,y,z]向量为[1,1,1]时，旋转轴如图绿色线所示

1560564933962

再加上旋转角度后：

1
2
3
.box2 {
    transform: rotate3d(1,1,1,45deg);
}

效果

1560565807459

transform-origin

​ transform-origin: x-axis y-axis z-axis;

scale3d(x,y,z)

1
2
3
4
/* transform: scaleX(0.5); */
/* transform: scaleY(0.5); */
/*元素没有厚度 Z轴上的缩放暂时是没有意义的*/
scale3d(2,2,0.5);

backface-visibility

1
2
/*当图片不是正面对象用户的时候就隐藏*/
backface-visibility: hidden;

preserve-3d

​ 让元素以3d效果去呈现 他是添加在父元素上的一个属性

animation

​ 关键帧动画(animation)：允许我们在多个状态之间进行动画

​ 过渡动画(transition )：允许我们在两个状态之间进行动画

1、先申明动画函数

1
2
3
4
5
6
7
8
9
10
11
12
@keyframes Animate{
    0%{
        /* 可以同时对多个属性添加动画效果 */
        transform: scale3d(1,1,1);
    }
    50%{
        transform: scale3d(2,2,2);
    }
    100%{
        transform: scale3d(1,1,1);
    }
}

2、使用 并配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.box:hover{
    /*动画的名字 调用动画函数*/
    animation-name: Animate;

    /*动画持续的时间*/
    animation-duration: 2s;

    /*动画延迟多长时间执行*/
    animation-delay: 1s;

    /*动画运动的曲线  linear匀速动画*/
    animation-timing-function: linear;

    /*指定动画执行的次数*/
    animation-iteration-count: infinite;

    /*让动画结束之后保留在动画结束的状态*/
    animation-fill-mode: forwards; 
    /*让动画结束之后保留在动画初始的状态*/
    /* animation-fill-mode: backwards;  */
}

最后更新： 2019年09月02日 11:07

原始链接： https://HowlCN.github.io/2018/02/15/CSS3/

赏
× 请我吃糖~
打赏二维码