2023【黑马程序员】移动 Web 第一天

最新推荐文章于 2024-11-12 11:19:19 发布

一只北极星

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量912

点赞数 16

文章标签：前端 css css3

本文链接：https://blog.csdn.net/abeijixingdeye/article/details/135328142

版权

一、平面转换

1. 平面转换（transform）

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

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

平面转换又叫 2D 转换

例子：

<!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 0;

            width: 100px;
            height: 100px;
            background-color: pink;

            transition: all 1s;
        }

        /* 鼠标滑过：添加动态效果 */
        div:hover {
            /* transform: translate(800px); */
            /* transform: rotate(360deg); */
            /* transform: scale(2); */
            transform: skew(180deg);
        }
    </style>
</head>

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

</html>

网页运行效果：

2. 平面转换 – 平移

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

取值:

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

技巧:

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

例子：

<!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>
        .cat {
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
            background-color: skyblue;
        }

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

        /* 鼠标移入猫盒子，犬盒子改变位置 */
        .cat:hover .dog {
            /* transform: translate(200px, 100px); */

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

            /* 只写一个数表示水平方向 */
            /* transform: translate(100px); */

            /* transform: translateY(100px); */
            transform: translateX(100px);
        }
    </style>
</head>

<body>
    <div class="cat">
        <div class="dog"></div>
    </div>
</body>

</html>

网页运行效果：

3. 平移实现居中效果

我们这里为了方便，只使用第二种方法

例子：

<!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>
        .cat {
            position: absolute;
            left: 50%;
            top: 50%;

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

            width: 200px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>

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

</html>

网页运行效果：

4. 案例双开门效果

例子：

<!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;
        }

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

            overflow: hidden;
        }

        /* CSS精灵图 */
        .cat .dog1,
        .cat .dog2 {
            width: 50%;
            height: 600px;
            background-image: url(./fm.jpg);

            transition: all .5s;
        }

        .cat .dog2 {
            background-position: right 0;
        }

        /* 鼠标悬停 */
        .cat:hover .dog1 {
            transform: translate(-100%);
        }

        .cat:hover .dog2 {
            transform: translate(100%);
        }
    </style>
</head>

<body>
    <div class="cat">
        <div class="dog1"></div>
        <div class="dog2"></div>
    </div>
</body>

</html>

网页运行效果：

5. 平面转换 – 旋转

属性：transform: rotate(旋转角度);

角度单位是 deg

技巧：

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

例子：

<!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 1s;
        }

        img:hover {
            transform: rotate(360deg);
            /* transform: rotate(-360deg); */
        }
    </style>
</head>

<body>
    <img src="./dog.png" alt="">
</body>

</html>

网页运行效果：

6. 平面转换 – 改变转换原点

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

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

取值：

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

例子：

<!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: 150px;
            border: 1px solid #000;
            transition: all 1s;

            transform-origin: right bottom;
        }

        img:hover {
            transform: rotate(360deg);
            /* transform: rotate(-360deg); */
        }
    </style>
</head>

<body>
    <img src="./dog.png" alt="">
</body>

</html>

网页运行效果：

7. 案例-时钟

transform-origin: center bottom;

例子：

<!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 {
      /* 1.定位 */
      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;
      transform: rotate(60deg);
      transform-origin: center bottom;
    }

    .minute {
      width: 5px;
      height: 65px;
      background-color: #333;
      margin-left: -3px;
      transform: rotate(120deg);
      transform-origin: center bottom;
    }

    .second {
      width: 4px;
      height: 80px;
      background-color: red;
      margin-left: -2px;
      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>

网页运行效果：

8. 平面转换 – 多重转换

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

属性：transform: translate() rotate();

多重转换原理：以第一种转换方式坐标轴为准转换形态

旋转会改变网页元素的坐标轴向
先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

例子：

<!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>
        .dog {
            width: 400px;
            height: 100px;
            border: 1px solid #000;
        }

        img {
            width: 100px;
            transition: all 3s;
        }

        /* 鼠标移入dog，图片边走边旋转 */
        .dog:hover img {
            /* 先平移再旋转 */
            transform: translate(300px) rotate(360deg);

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

            /* 层叠性 */
            /* transform: translate(300px);
            transform: rotate(360deg); */
        }
    </style>
</head>

<body>
    <div class="dog">
        <img src="./dog.png" alt="">
    </div>
</body>

</html>

网页运行效果：

9. 平面转换 – 缩放

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

属性：

transform: scale(缩放倍数);

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

技巧：

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

例子：

<!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>
        .dog {
            width: 200px;
            height: 200px;
            margin: auto;
        }

        img {
            width: 100px;
            transition: all .5s;
        }

        .dog:hover img {
            /* transform: scale(2); */
            /* transform: scale(1); */
            transform: scale(0.5);
        }
    </style>
</head>

<body>
    <div class="dog">
        <img src="./dog.png" alt="">
    </div>
</body>

</html>

网页运行效果：

10. 案例播放特效

例子：

<!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;
        }

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

        .pic {
            position: relative;
        }

        .pic::after {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -29px;
            margin-top: -29px;
            content: '';
            width: 58px;
            height: 58px;
            background-image: url(./play.png);
            transform: scale(5);
            /* 透明度 */
            opacity: 0;

            transition: all .5s;
        }

        /* hover 效果：大按钮，看不见；透明度0，看得见 */
        .box li:hover .pic::after {
            transform: scale(1);
            /* 透明度 */
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <div class="pic">
                    <img src="./party.jpeg" alt="">
                </div>
                <p>【和平精英】“初火”音乐概念片，四圣觉醒......</p>
            </li>
        </ul>
    </div>
</body>

</html>

网页运行效果：

11. 平面转换 – 倾斜

属性：transform: skew();

取值：角度度数 deg

例子：

<!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: skyblue;
            transition: all .5s;
        }

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

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

</html>

网页运行效果：

二、渐变

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

分类：

线性渐变
径向渐变

1. 线性渐变

属性：

background-image: linear-gradient(

        渐变方向,

        颜色1 终点位置,

        颜色2 终点位置,

         ......

);

取值

渐变方向：可选

to 方位名词
角度度数

终点位置：可选

百分比

例子：

<!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: pink;
            background-image: linear-gradient(skyblue, pink);

            /* background-image: linear-gradient(to right, skyblue, pink); */

            /* background-image: linear-gradient(45deg, skyblue, pink); */

            /* background-image: linear-gradient(skyblue 80%, pink); */
        }
    </style>
</head>

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

</html>

网页运行效果：

2. 案例产品展示

例子：

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

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>产品展示效果</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%;
      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.jpeg" alt="" />
    <div class="title">OceanStor Pacific 海量存储斩获2021 Interop金奖</div>
    <div class="mask"></div>
  </div>
</body>

</html>

网页运行效果：

3. 径向渐变

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

属性：

background-image: radial-gradient(

        半径 at 圆心位置,

        颜色1 终点位置,

        颜色2 终点位置,

        ......

);

取值：

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

例子：

<!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%;

            /* background-image: radial-gradient(50px at center center, red, pink); */
            /* background-image: radial-gradient(50px 20px at center center, red, pink); */
            /* background-image: radial-gradient(50px at center center, red 5%, pink); */
            background-image: radial-gradient(50px at 50px 30px, red, pink);
        }

        button {
            width: 100px;
            height: 40px;
            background-color: skyblue;
            border: 0;
            border-radius: 5px;
            color: #fff;

            background-image: radial-gradient(20px at 10px 10px, rgba(255, 255, 255, 0.2), transparent);
        }
    </style>
</head>

<body>
    <div></div>
    <button>Hello World</button>
</body>

</html>

网页运行效果：

4. 案例综合案例 – 喜马拉雅

代码：

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

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>喜马拉雅</title>
  <link rel="stylesheet" href="./css/font.css">
  <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
  <header class="x-header">
    <div class="container">
      <a href="#" class="x-header-logo">喜马拉雅</a>
      <nav class="x-header-nav">
        <a href="#" class="nav-item">发现</a>
        <a href="#" class="nav-item">
          频道<span class="iconfont icon-down"></span>
          <div class="channel-layer">
            所有频道<br>
            所有频道<br>
            所有频道<br>
            所有频道<br>
          </div>
        </a>
        <a href="#" class="nav-item">电台</a>
      </nav>
      <div class="x-header-search">
        <form action="#">
          <input type="text" placeholder="专辑/声音/主播" />
          <a href="#" class="btn">
            <span class="iconfont icon-search"></span>
          </a>
        </form>
      </div>
      <div class="x-header-icons">
        <a href="#" class="icons-item">
          <span class="iconfont icon-cloud-upload"></span>
          <span class="tit">上传</span>
        </a>
        <a href="#" class="icons-item">
          <span class="iconfont icon-pic-left"></span>
          <span class="tit">创作中心</span>
        </a>
        <a href="#" class="icons-item">
          <span class="iconfont icon-sound"></span>
          <span class="tit">有声出版</span>
        </a>
        <a href="#" class="icons-item">
          <span class="iconfont icon-desktop"></span>
          <span class="tit">客户端</span>
        </a>
        <a href="#" class="icons-item">
          <img src="./assets/avatar.png" alt="" />
        </a>
      </div>
    </div>
  </header>
  <main class="x-main">
    <div class="container">
      <!-- banner -->
      <div class="banner">
        <ul class="banner-list">
          <li class="banner-item left">
            <a href="#">
              <img src="./assets/banner01.jpg" alt="" />
            </a>
          </li>
          <li class="banner-item">
            <a href="#">
              <img src="./assets/banner02.jpg" alt="" />
            </a>
          </li>
          <li class="banner-item right">
            <a href="#">
              <img src="./assets/banner03.jpg" alt="" />
            </a>
          </li>
        </ul>
      </div>
      <!-- category -->
      <nav class="category">
        <div class="category-top">
          <a href="#" class="top-item">
            <span class="iconfont icon-block top-item-icon"></span>
            <span>频道</span>
          </a>
          <a href="#" class="top-item">
            <span class="iconfont icon-appstore top-item-icon"></span>
            <span>分类</span>
          </a>
          <a href="#" class="top-item">
            <span class="iconfont icon-crown top-item-icon"></span>
            <span>排行</span>
          </a>
        </div>
        <div class="category-sub">
          <div class="category-sub-item">
            <a href="#" class="start">小说</a>
            <a href="#">男频</a>
            <a href="#">女频</a>
          </div>
          <div class="category-sub-item">
            <a href="#" class="start">相声</a>
            <a href="#">郭麒麟</a>
            <a href="#">岳云鹏</a>
          </div>
          <div class="category-sub-item">
            <a href="#" class="start">音乐</a>
            <a href="#">电音</a>
            <a href="#">流行</a>
          </div>
          <div class="category-sub-item">
            <a href="#" class="start">商业</a>
            <a href="#">市场营销</a>
            <a href="#">管理</a>
          </div>
          <div class="category-sub-item">
            <a href="#" class="start">健康</a>
            <a href="#">饮食</a>
            <a href="#">科普</a>
          </div>
          <div class="category-sub-item">
            <a href="#" class="start">科技</a>
            <a href="#">互联</a>
            <a href="#">无人驾驶</a>
          </div>
          <div class="category-sub-item">
            <a href="#" class="start">英语</a>
            <a href="#">听力</a>
            <a href="#">实用</a>
          </div>
          <div class="category-sub-item">
            <a href="#" class="start">头条</a>
            <a href="#">实时快讯</a>
            <a href="#">民生</a>
          </div>
        </div>
      </nav>
      <!-- layout -->
      <section class="layout">
        <!-- 主体内容  -->
        <div class="layout-main">
          <div class="panel">
            <div class="panel-head">
              <h3 class="panel-head-tit">猜你喜欢</h3>
              <a class="panel-head-toggle" href="#">
                <span class="iconfont icon-sync"></span>
                <span>换一批</span>
              </a>
            </div>
            <div class="panel-body">
              <ul>
                <li>
                  <a href="#" class="album-item">
                    <div class="album-item-box">
                      <img class="img" src="./assets/img01.jpg" alt="" />
                    </div>
                    <p class="album-item-tit">奇妙三字经 | 诵读吟唱经典磨耳朵 | 宝宝巴士国学</p>
                    <p class="album-item-aut">宝宝巴士</p>
                  </a>
                </li>
                <li>
                  <a href="#" class="album-item">
                    <div class="album-item-box">
                      <img class="img" src="./assets/img02.jpg" alt="" />
                    </div>
                    <p class="album-item-tit">我的世界 小绿的日记</p>
                    <p class="album-item-aut">狙击手小鲁</p>
                  </a>
                </li>
                <li>
                  <a href="#" class="album-item">
                    <div class="album-item-box">
                      <img class="img" src="./assets/img03.jpg" alt="" />
                    </div>
                    <p class="album-item-tit">呼呼收音机：传统节日故事</p>
                    <p class="album-item-aut">呼呼收音机</p>
                  </a>
                </li>
                <li>
                  <a href="#" class="album-item">
                    <div class="album-item-box">
                      <img class="img" src="./assets/img04.jpg" alt="" />
                    </div>
                    <p class="album-item-tit">小学生必背古诗词75+80首</p>
                    <p class="album-item-aut">同优文化</p>
                  </a>
                </li>
                <li>
                  <a href="#" class="album-item">
                    <div class="album-item-box">
                      <img class="img" src="./assets/img05.jpg" alt="" />
                    </div>
                    <p class="album-item-tit">朕|起点爆款历史文｜架空权谋&逆袭成帝|VIP免费有声小说</p>
                    <p class="album-item-aut">伍壹先生</p>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 侧边栏 -->
        <div class="layout-aside">
          <div class="card">
            <div class="card-head">
              <img class="avatar" src="./assets/avatar.png" alt="" />
              <p class="text">登录一下，让我了解你</p>
            </div>
            <div class="card-info">
              <a href="#" class="login">登 录</a>
            </div>
          </div>
          <div class="download">
            <div class="dl">
              <p class="dl-tit">下载客户端</p>
              <a href="#" class="dl-btn">iPhone</a>
              <a href="#" class="dl-btn">Android</a>
            </div>
            <img src="./assets/hm.jpg" alt="">
          </div>
        </div>
      </section>
    </div>
  </main>
</body>

</html>

网页运行效果：