CSS 平面转换渐变

最新推荐文章于 2024-07-26 08:00:00 发布

wwangxu

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量913

点赞数 20

文章标签： css 平面 css3

本文链接：https://blog.csdn.net/qq_67140973/article/details/139150948

版权

Web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1. 平面转换 - transform

作用：为元素添加动态效果，一般与过渡配合使用。

概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜），平面转换又叫 2D 转换。

1.1 平面转换 - 平移

属性：

transform: translate(x轴移动距离，y轴移动距离)
transform: translateX(x轴移动距离)
transform: translateY(y轴移动距离)

取值：

像素单位数值
百分比（参照盒子自身尺寸计算）
若只写一个数，则修改水平方向
正负均可，代表正反方向

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title</title>
    <style>
        .father {
            margin: 100px auto;
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }
        .son {
            width: 150px;
            height: 150px;
            background-color: pink;
            transition: all 1s;
        }
        .son:hover {
            transform: translate(50%,50%);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

页面效果就是，当鼠标移动到子级盒子时，盒子会在父级盒子左上角移动到该位置：
在这里插入图片描述

1.2 平面转换 - 旋转

属性：

transform: ratate(旋转角度);

旋转角度单位为 deg，即度°
取值为正，顺时针旋转
取值为负，逆时针旋转

作用：旋转指定对象

例如：

<style>
	div {
		width: 200px;
		height: 200px;
		background-color: pink;
	}
	div:hover {
		transform: ratate(360deg);
	}
</style>
<body>
	<div></div>
</body>

上述页面效果：鼠标悬停在盒子上时，盒子顺时针旋转360°

1.3 平面转换 - 改变转换原点

默认情况下，所有转换都是沿着盒子中心点转换的，转换原点默认就是合资的中心点

属性：

transform-origin: 水平原点位置 垂直原点位置;

取值：

方位名词：left、top、right、bottom、center
像素单位数值
百分比

作用：改变转换原点位置。

例如：

<style>
	div {
		width: 200px;
		height: 200px;
		background-color: pink;
		/* 将原点调为盒子的右下角 */
		transform-origin:right bottom;
	}
	div:hover {
	/* 沿着盒子右下角旋转 */
		transform: ratate(360deg);
	}
</style>
<body>
	<div></div>
</body>

1.4 平面转换 - 多重转换

作用：用一个标签来实现多个转换的实现

属性：

transform: translate() rotate();

先平移，再旋转

属性：

transform:rotate() translate();

先旋转，再平移
转换会改变坐标轴向
多重转换以第一种转换形态的坐标轴为准

若对同一个对象既要平移又要旋转，那么只能用多重转换的方式来实现，因为对于同一个 transform 属性会出现覆盖的情况。

例如：

<style>
	div {
		width: 100px;
		height: 300px;
		background-color: red;
		transition: all 0.5s;
	}

	div:hover {
		transform: translate(-50%，-50%) rotate(360deg);
	}
</style>
<body>
<div></div>
</body>

1.5 平面转换 - 缩放

作用：对指定对象进行放大缩小

属性值：

transform: scale(缩放倍数);
transform:scal(X轴缩放倍数，Y轴缩放倍数);

取值：

第一种写法取值表示X轴和Y轴等比例缩放，取值大于1表示放大，取值小于1表示缩小

注：

若通过改变宽和高的方式进行缩放的话，是从左上角开始缩放。
若通过平面转换的方式进行缩放的话，是从转换原点开始缩放

例如：

<style>
	div {
		width: 100px;
		height: 300px;
		background-color: red;
		transition: all 0.5s;
	}

	div:hover {
		transform: scale(2);
		/* transform: scale(1,2); */
	}
</style>
<body>
<div></div>
</body>

1.6 平面转换 - 倾斜

作用：设置对象的倾斜角度

属性：transform: skew();

取值：

角度度数，单位为 deg
正数为向左偏
负数为向右偏

例如：

<style>
	div {
		width: 100px;
		height: 300px;
		background-color: red;
		transition: all 0.5s;
	}

	div:hover {
		transform: skew(40deg);
	}
</style>
<body>
<div></div>
</body>

2. 渐变

渐变是多个颜色逐渐变化的效果，一般用于设置盒子背景。

分类：

线性渐变：沿一条线渐变
径向渐变：从中心点向四周渐变

2.1 线性渐变

属性：

background-image: linear-gradient(
	渐变方向,
	颜色1 终点位置,
	颜色2 终点位置,
	......
);

取值：

渐变方向（选写）：
- 不写默认为从上到下
- to 方位名词
- 角度度数
终点位置（选写）：
- 不写默认均分
- 百分比

例如：

<style>
	.div1 {
		width: 100px;
		height: 100px;
		background-color: red;
		background-image: linear-gradient(
			red,
			green
		);
	}
	.div2 {
		width: 100px;
		height: 100px;
		background-color: red;
		background-image: linear-gradient(
			to right,
			red,
			green
		);
	}
	.div3 {
		width: 100px;
		height: 100px;
		background-color: red;
		background-image: linear-gradient(
			45deg,
			red,
			green
		);
	}
	.div4{
		width: 100px;
		height: 100px;
		background-color: red;
		background-image: linear-gradient(
			red 80%,
			green
		);
	}
</style>
<body>
<div class="div1"></div>
<br>
<div class="div2"></div>
<br>
<div class="div3"></div>
<br>
<div class="div4"></div>
</body>

页面效果：
在这里插入图片描述

2.2 径向渐变

作用：给按钮添加高光效果

属性：

background-image: radial-gradient(
	半径 at 圆心位置,
	颜色1 终点位置,
	颜色2 终点位置,
	......
)

取值：

半径可以是2条，此时为椭圆
圆心位置取值：像素单位数值 / 百分比 / 方位名词

例如：

<style>
	.div1 {
		width: 100px;
		height: 100px;
		background-color: pink;
		border-radius: 50%;
		background-image: radial-gradient(
			50px at center center,
			red,
			pink
		);
	}
	.div2 {
		width: 100px;
		height: 100px;
		background-color: pink;
		border-radius: 50%;
		background-image: radial-gradient(
			50px 20px at center center,
			red,
			pink
		);
	}
	.div3 {
		width: 100px;
		height: 100px;
		background-color: pink;
		border-radius: 50%;
		background-image: radial-gradient(
			50px at 30px 50px,
			red,
			pink
		);
	}
	.div4 {
		width: 100px;
		height: 100px;
		background-color: pink;
		border-radius: 50%;
		background-image: radial-gradient(
			50px at center center,
			red,
			pink 50%
		);
	}
</style>
<body>
<div class="div1"></div>
<br>
<div class="div2"></div>
<br>
<div class="div3"></div>
<br>
<div class="div4"></div>
</body>