![001](./10_平面转换 + 渐变/001.png)

10_平面转换 + 渐变

01_平面转换

01_体验

作用: 为元素 添加动态效果, 一般与 过渡 配合使用

概念: 改变盒子在 平面 内的 形态 (位移, 旋转, 缩放, 倾斜)

平面转换又叫 2D 转换

02_平移

01_平移

属性

取值

像素单位数值
百分比 (参照 盒子自身尺寸 计算结果)
正负均可

技巧

translate() 只写 一个值, 表示沿着 X 轴移动
单独设置 X 或 Y 轴移动距离: translateX() 或 translateY()

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .father {
      width: 500px;
      height: 300px;
      margin: 100px auto;
      border: 1px solid #000;
    }

    .son {
      width: 200px;
      height: 100px;
      background-color: pink;
      transition: all 0.5s;
    }

    /* 鼠标移入到父盒子, son 改变位置 */
    .father:hover .son {

      /* 1.像素单位数值 */
      /* transform: translate(200px, 100px); */

      /* 2.百分比: 参照 盒子自身尺寸 计算结果 */
      /* transform: translate(50%, 100%); */
      /* transform: translate(-50%, 100%); */

      /* 3.translate() 只写 一个值, 表示沿着 X 轴移动*/
      /* transform: translate(100px); */

      /* 4.单独设置 Y 轴移动距离 */
      /* transform: translateY(100px); */

      /* 5.单独设置 X 轴移动距离 */
      transform: translateX(100px);
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>

</html>

02_总结

给盒子添加 向左, 向上 的位移效果, 属性取值为正还是负?

负

translate() 只写 一个值 表示哪个方向移动?

水平 (X 轴)

百分比取值参照什么计算最终结果?

盒子自身尺寸

03_实现居中效果

01_实现居中效果

方法一

方法二: 百分比参照 盒子自身尺寸 计算结果

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: pink;

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

      /* 1.向左向上移动自身尺寸的一半 */
      transform: translate(-50%, -50%);
    }
  </style>
</head>

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

</html>

04_双开门案例

01_双开门案例

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    /* 1.布局: 父子结构, 父级是大图, 子级是左右小图 */
    .father {
      display: flex;
      margin: 0 auto;
      width: 1366px;
      height: 600px;
      background-image: url(./images/bg.jpg);

      overflow: hidden;
    }

    .father .left,
    .father .right {
      width: 50%;
      height: 600px;
      background-image: url(./images/fm.jpg);

      transition: all .5s;
    }

    .father .right {
      /* 2.right 表示的取到精灵图右面的图片 */
      background-position: right 0;
    }

    /* 3.鼠标悬停的效果: 左右移动 */
    .father:hover .left {
      transform: translate(-100%);
    }

    .father:hover .right {
      transform: translateX(100%);
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>

</html>

05_旋转

01_旋转

属性

角度单位是 deg

技巧

取值 正负均可
取值为 正, 顺 时针旋转
取值为 负, 逆 时针旋转

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    img {
      width: 200px;
      transition: all 2s;
    }

    /* 鼠标悬停到图片上面, 添加旋转效果 */
    img:hover {
      /* 1.取值为 正, 顺 时针旋转 */
      /* transform: rotate(360deg); */

      /* 2.取值为 负, 逆 时针旋转 */
      transform: rotate(-360deg);
    }
  </style>
</head>

<body>
  <img src="./images/rotate.png" alt="">
</body>

</html>

06_改变转换原点

01_改变转换原点

默认情况下, 转换原点是 盒子中心点

属性

取值

方位名词 (left, top, right, bottom, center)
像素单位数值
百分比

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    img {
      width: 200px;
      border: 1px solid #000;
      transition: all 1s;
  
      /* 1.改变转换原点 */
      transform-origin: right bottom;
    }
  
    img:hover {
      transform: rotate(360deg);
    }
  </style>
</head>

<body>
  <img src="./images/rotate.png" alt="">
</body>

</html>

02_时钟案例

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .clock {
      width: 250px;
      height: 250px;
      border: 8px solid #000;
      border-radius: 50%;
      margin: 100px auto;
      position: relative;
    }

    .line {
      /* 定位 */
      position: absolute;
      width: 4px;
      height: 250px;
      background-color: #999;
      left: 50%;
      transform: translate(-50%);
    }

    /* 线2: 旋转, 每条线旋转角度不同, 单独选中不同的 line, 写 rotate 代码 */
    /* 一圈是 360 度, 等分成  xx 份 */
    .line:nth-child(2) {
      transform: translate(-50%) rotate(30deg);
    }

    .line:nth-child(3) {
      transform: translate(-50%) rotate(60deg);
    }

    .line:nth-child(4) {
      transform: translate(-50%) rotate(90deg);
    }

    .line:nth-child(5) {
      transform: translate(-50%) rotate(120deg);
    }

    .line:nth-child(6) {
      transform: translate(-50%) rotate(150deg);
    }

    /* 第一根和第四跟宽度大一些 */
    .line:nth-child(1),
    .line:nth-child(4) {
      width: 5px;
    }

    /* 遮罩圆形 */
    .cover {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 200px;
      height: 200px;
      background-color: #fff;
      border-radius: 50%;
    }

    /* 表针 */
    /* 并集选择器放在单独选择器的上面, 避免 transform 属性的层叠 */
    .hour,
    .minute,
    .second {
      position: absolute;
      left: 50%;
      /* 盒子底部在盒子中间 */
      bottom: 50%;
    }

    .hour {
      width: 6px;
      height: 50px;
      background-color: #333;
      margin-left: -3px;

      /* 3.旋转, 并改变转换原点 */
      transform: rotate(15deg);
      transform-origin: center bottom;
    }

    .minute {
      width: 5px;
      height: 65px;
      background-color: #333;
      margin-left: -3px;

      /* 2.旋转, 并改变转换原点 */
      transform: rotate(90deg);
      transform-origin: center bottom;
    }

    .second {
      width: 4px;
      height: 80px;
      background-color: red;
      margin-left: -2px;

      /* 1.旋转, 并改变转换原点 */
      transform: rotate(240deg);
      transform-origin: center bottom;
    }

    /* 螺丝 */
    .dotted {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 18px;
      height: 18px;
      background-color: #333;
      border-radius: 50%;
    }
  </style>
</head>

<body>
  <div class="clock">
    <!-- 刻度线 -->
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>

    <!-- 遮罩圆形 -->
    <div class="cover"></div>
    <!-- 表针 -->
    <div class="hour"></div>
    <div class="minute"></div>
    <div class="second"></div>

    <!-- 螺丝 -->
    <div class="dotted"></div>
  </div>
</body>

</html>

07_多重转换

01_多重转换

平面转换 - 多重转换

多重转换技巧: 先平移再旋转

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .box {
      width: 800px;
      height: 200px;
      border: 1px solid #000;
    }
  
    img {
      width: 200px;
      transition: all 5s;
    }
  
    /* 鼠标移入 box, 图片边走边转 */
    .box:hover img {
      /* 1.多重转换技巧: 先平移再旋转 */
      transform: translate(600px) rotate(360deg);
  
      /* 2.旋转会改变坐标轴向; 多重转换: 以第一种转换形态的坐标轴为准 */
      /* transform: rotate(360deg) translate(600px); */
  
      /* 3.层叠性: 多重转换只能复合写法 */
      /* transform: translate(600px);
      transform: rotate(360deg); */
    }
  </style>
</head>

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

</html>

08_缩放

01_缩放

思考: 改变元素的 width 或 height 属性能实现吗?

不可以, 修改宽高尺寸, 从左上角开始缩放

属性

技巧

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

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .box {
      width: 300px;
      height: 210px;
      margin: 100px auto;
      background-color: pink;
    }

    .box img {
      width: 100%;
      transition: all 0.5s;
    }

    .box:hover img {
      /* 1.修改宽高尺寸, 从左上角开始缩放 */
      /* width: 500px;
      height: 400px; */

      /* 2.取值 大于 1 表示 放大 */
      /* transform: scale(2); */

      /* 3.取值 小于 1 表示 缩小 */
      transform: scale(0.5);

      /* 4.取值 等于 1 表示 不变 */
      /* transform: scale(1); */
    }
  </style>
</head>

<body>
  <div class="box">
    <img src="./images/product.jpeg" alt="" />
  </div>
</body>

</html>

09_播放特效案例

01_播放特效

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    img {
      width: 100%;
    }

    .box {
      width: 249px;
      height: 210px;
      margin: 50px auto;
    }

    .box p {
      color: #3b3b3b;
      padding: 10px 10px 0 10px;
    }

    /* 1.摆放播放按钮: 图片区域的中间 */
    .box li {
      overflow: hidden;
    }

    .pic {
      position: relative;
    }

    .pic::after {
      position: absolute;
      left: 50%;
      top: 50%;

      /* margin-left: -29px;
      margin-top: -29px; */

      /* transform: translate(-50%, -50%); */

      content: '';
      width: 58px;
      height: 58px;
      background-image: url(./images/play.png);
      transform: translate(-50%, -50%) scale(5);
      opacity: 0;

      transition: all .5s;
    }

    /* 2.hover 效果: 大按钮, 看不见: 透明是 0 ==> 小按钮, 看得见: 透明度 1 */
    .box li:hover .pic::after {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="box">
    <ul>
      <li>
        <div class="pic">
          <img src="./images/party.jpeg" alt="" />
        </div>
        <p> [和平精英] "初火" 音乐概念片: 四圣觉醒......</p>
      </li>
    </ul>
  </div>
</body>

</html>

10_倾斜

01_倾斜

属性

取值

角度度数 deg

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

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

    div:hover {
      /* 1.正数: 向左倾斜 */
      /* transform: skew(30deg); */

      /* 2.负数: 向右倾斜 */
      transform: skew(-30deg);
    }
  </style>
</head>

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

</html>

02_渐变

01_线性渐变

01_渐变

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

分类

线性渐变
径向渐变

02_线性渐变

属性

取值

渐变方向: 可选
to 方位名词
角度度数
终点位置: 可选
百分比

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: green;

      /* 1.从上到下 (由红渐变为绿) */
      /* background-image: linear-gradient(
        red,
        green
      ); */

      /* 2.从左到右 (由红渐变为绿) */
      /* background-image: linear-gradient(
        to right,
        red,
        green
      ); */

      /* 3.从左到右 (向左倾斜 45 度, 由红渐变为绿)*/
      /* background-image: linear-gradient(
        45deg,
        red,
        green
      ); */

      /* 4.从上到下 (红占 80% 开始渐变为绿) */
      background-image: linear-gradient(
        red 80%,
        green
      );
    }
  </style>
</head>

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

</html>

03_产品展示案例

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .box {
      position: relative;
      width: 300px;
      height: 212px;
    }

    .box img {
      width: 300px;
    }

    .box .title {
      position: absolute;
      left: 15px;
      bottom: 20px;
      z-index: 2;
      width: 260px;
      color: #fff;
      font-size: 20px;
      font-weight: 700;
    }

    .mask {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;

      /* 1.线性渐变 */
      background-image: linear-gradient(
        transparent,
        rgba(0, 0, 0, 0.5)
      );

      opacity: 0;

      transition: all .5s;
    }

    .box:hover .mask {
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="box">
    <img src="./images/product.jpg" alt="" />
    <div class="title">OceanStor Pacific 海量存储斩获2021 Interop金奖</div>
    <div class="mask"></div>
  </div>
</body>

</html>

02_径向渐变

01_径向渐变

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

属性

取值

半径可以是 2 条, 则为 椭圆
圆心位置取值: 像素单位数值 / 百分比 / 方位名词

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
      border-radius: 50%;
  
      /* 1.半径为 50px 开始: 位置(水平居中, 垂直居中), 由红色径向渐变为粉红色 */
      background-image: radial-gradient(
        50px at center center,
        red,
        pink
      );
  
      /* 2.水平半径为 50px 垂直半径为 20px 开始: 位置(水平居中, 垂直居中), 由红色径向渐变为粉红色*/
      /* background-image: radial-gradient(
        50px 20px at center center,
        red,
        pink
      ); */
  
      /* 3.半径为 50px 开始: 位置(水平 50px, 垂直 30px), 由红色径向渐变为粉红色*/
      /* background-image: radial-gradient(
        50px at 50px 30px,
        red,
        pink 50%
      ); */
    }
  
    button {
      width: 100px;
      height: 40px;
      background-color: green;
      border: 0;
      border-radius: 5px;
      color: #fff;
  
      /* 4.半径为 30px 开始: 位置(水平 30px, 垂直 20px), 由白色半透明到透明 */
      background-image: radial-gradient(
        30px at 30px 20px,
        rgba(255, 255, 255, 0.2),
        transparent
      );
    }
  </style>
</head>

<body>
  <div></div>
  <button>按钮</button>
</body>

</html>

03_综合案例

01_喜马拉雅

css

/* /code/css/index.css */

/* 1.箭头旋转 */
.x-header-nav .nav-item:hover .icon-down {
  transform: rotate(-180deg);
}

/* 2.弹窗频道 */
.channel-layer {
  transform: translateY(-120px);
}

.x-header-nav .nav-item:hover .channel-layer {
  transform: translateY(0);
}

/* 3.渐变按钮 */
.x-header-search form .btn {
  background-image: linear-gradient(to right,
    rgba(255, 255, 255, 0.3),
    #f86442
  );
}

/* 4.渐变按钮 */
.card .card-info .login {
  background-image: linear-gradient(to right,
    rgba(255, 255, 255, 0.2),
    #ff7251
  );
}

/* 5.径向渐变 */
.download .dl .dl-btn {
  background-image: radial-gradient(50px at 10px 10px,
    rgba(255, 255, 255, 0.5),
    transparent
  );
}

/* 6.摆放图片 */
.banner .banner-list .banner-item.left {
  transform: translate(-160px) scale(0.8);
  transform-origin: left center;
}

.banner .banner-list .banner-item.right {
  transform: translate(160px) scale(0.8);
  transform-origin: right center;
}

/* 7.播放按钮盒遮罩 */
.album-item .album-item-box::after {
  position: absolute;
  left: 0;
  top: 0;
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5) url(../assets/play.png) no-repeat center /20px;
  opacity: 0;
  transition: all .5s;
}

.album-item .album-item-box:hover::after {
  opacity: 1;
  background-size: 50px;
}

/* 8.图片缩放 */
.album-item .album-item-box:hover img {
  transform: scale(1.1);
}

10_平面转换 + 渐变 ​

01_平面转换 ​

01_体验 ​

02_平移 ​

03_实现居中效果 ​

04_双开门案例 ​

05_旋转 ​

06_改变转换原点 ​

07_多重转换 ​

08_缩放 ​

09_播放特效案例 ​

10_倾斜 ​

02_渐变 ​

01_线性渐变 ​

02_径向渐变 ​

03_综合案例 ​

01_喜马拉雅 ​

10_平面转换 + 渐变

01_平面转换

01_体验

02_平移

03_实现居中效果

04_双开门案例

05_旋转

06_改变转换原点

07_多重转换

08_缩放

09_播放特效案例

10_倾斜

02_渐变

01_线性渐变

02_径向渐变

03_综合案例

01_喜马拉雅