Day10：平面转换、渐变色

原创已于 2024-06-18 14:22:15 修改 · 1.2k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css #平面转换 #渐变色 #旋转

于 2024-05-31 19:49:48 首次发布

HTML入门教程专栏专栏收录该内容

14 篇文章

订阅专栏

目标：使用位移、缩放、旋转、渐变效果丰富网页元素的呈现方式。

一、平面转换

1、简介

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

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

在这里插入图片描述

平面转换也叫 2D 转换，属性是 transform。

2、平移

transform: translate(X轴移动距离, Y轴移动距离);

取值
- 像素单位数值
- 百分比（参照盒子自身尺寸计算结果）
- 正负均可，正值：向左、向下；负值：向右、向上
技巧
- translate() 只写一个值，表示沿着 X 轴移动
- 单独设置 X 或 Y 轴移动距离：translateX() 或 translateY()

练习：定位居中

方法一：margin-left, margin-top 设置为负值
方法二：使用 transform 向左向上移动自身尺寸的一半

<head>
	<style>
		.box {
			background-color: pink;

			position: absolute;
			left: 50%;
			top: 50%;

			/* 方法一: margin-left, margin-top 设置为负值 */
			/* margin-left: -100px;
            margin-top: -50px; */

			/* 方法二: 使用 transform 向左向上移动自身尺寸的一半 */
			transform: translate(-50%, -50%);

			width: 200px;
			height: 100px;
		}
	</style>
</head>

<body>
	<div class="box"></div>
</body>

3、旋转

transform: rotate(旋转角度);

取值：角度单位是 deg
技巧
- 取值正负均可
- 取值为正，顺时针旋转
- 取值为负，逆时针旋转

4、转换原点

默认情况下，转换原点是盒子中心点。可以通过 transform-origin 修改转换原点位置。

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

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

5、多重转换

同时使用平移和旋转，实现下面效果：

在这里插入图片描述

transform: translate() rotate();

技巧：要先平移再旋转

多重转换原理：以第一种转换方式的坐标轴为准
（1）旋转会改变网页元素的坐标轴向
（2）先写旋转，则后面的平移效果的坐标轴以旋转后的坐标轴为准，旋转时坐标轴在不停的变化，平移的方向也在不停的变化

错误案例：先写旋转，再写平移，效果如下：

在这里插入图片描述

<head>
  <title>多重转换</title>
  <style>
    .box {
      margin-left: 600px;
      margin-top: 500px;
      width: 800px;
      height: 200px;
      border: 1px solid #000;
    }

    img {
      width: 200px;
      transition: all 5s;
    }

    /* 鼠标移入box，图片边走边转 */
    .box:hover img {

      /* 先平移再旋转 */
      transform: translate(600px) rotate(360deg);

      /* 错误: 先旋转再平移 */
      /* 旋转会改变坐标轴向 */
      /* 多重转换：以第一种转换形态的坐标轴为准 */
      /* transform: rotate(360deg) translate(600px); */

      /* 层叠性 */
      /* 分开写也不行, 后面的转换效果会覆盖前面的转换效果 */
      /* transform: translate(600px);
        transform: rotate(360deg); */
    }
  </style>
</head>

<body>
  <div class="box">
    <img src="./images/tyre1.png" alt="" />
  </div>
</body>

6、缩放

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

技巧
- 通常，只为 scale() 设置一个值，表示 X 轴和 Y 轴等比例缩放
- 取值大于1表示放大，取值小于1表示缩小

7、倾斜

在这里插入图片描述

transform: skew();

取值：角度度数 deg

<head>
  <title>倾斜效果</title>
  <style>
    body {
      background-color: #eee;
    }

    div {
      margin: 100px auto;
      width: 100px;
      height: 200px;
      background-color: pink;
      transition: all 0.5s;
    }

    div:hover {
      transform: skew(30deg);
      /* transform: skew(-30deg); */
    }
  </style>
</head>

<body>
  <div></div>
</body>

二、渐变

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

分类：

线性渐变

在这里插入图片描述

径向渐变

在这里插入图片描述

1、线性渐变

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

取值：

渐变方向：可选，如果不写方向，默认是从上向下，即 to bottom 或 180deg
- to 方位名词，to right，to bottom…
- 角度度数，0deg，90deg，180deg…
终点位置：可选
- 百分比，这个颜色所占的比例，如果不写，默认是几个颜色平分

<head>
  <title>线性渐变</title>
  <style>
    body {
      background-color: #eee;
    }

    div {
      margin-left: 100px;
      margin-top: 100px;
      width: 200px;
      height: 200px;
      /* 设置了渐变色, 就是设置了 background-image, 背景色被覆盖, 除非渐变色设置透明 transparent */
      background-color: yellow;

      /* 默认从上到下的方向 */
      background-image: linear-gradient(red,
          transparent);

      background-image: linear-gradient(to right,
          red,
          green);

      /* 使用角度, 0deg 是从下向上开始, 正值顺时针旋转, 90deg 从左到右 */
      background-image: linear-gradient(0deg,
          red,
          green);

      /* 属性一样， 最后写的会覆盖前面的属性 */
      /* 默认从上向下, 红色占比 80% */
      background-image: linear-gradient(red 80%,
          green);
    }
  </style>
</head>

<body>
  <div></div>
</body>

在这里插入图片描述

设置了渐变色，就是设置了 background-image，背景色会被覆盖，除非渐变色设置了透明 transparent。

2、径向渐变

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

取值：

半径可以是 2 条，则为椭圆
圆心位置取值：像素单位数值 / 百分比 / 方位名词
超过半径的区域显示渐变色设置的最后一个颜色值
如果想要超过半径的区域显示背景色，可以将最后一个颜色设置为透明色 transparent

三、综合案例

使用今日所学的平面转换和渐变色，实现下面网页中的特效。

在这里插入图片描述

想要完整代码的，点击这里获取Day10综合案例完整代码。完全免费，仅供学习参考使用。

在这里插入图片描述

乾坤未定，你我皆是黑马