web第一天笔记

爱泡脚的鸡腿
28 阅读5分钟

1.基础

image.png

1.1 字体图标

image.png

image.png

image.png

image.png

1.1.1 将目标选择器的权重提到最高

选择器 { 属性: 值 !important; }

1.1.2 上传图标

image.png 上传=>审核=>去颜色=>通过

2.平面转换

image.png

image.png

<!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: 100px;
      height: 100px;
      background-color: red;
      /* 外边距 */
      margin: 100px auto;
    }

    .box:hover {
      /* 转换 */
      /* translate(x轴，y轴) */
      transform: translate(100px, 100px);
      /* 渐变过渡 */
      transition: all 0.3s;
    }
  </style>
</head>

<body>
  <div class="box"></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>
    .father {
      width: 600px;
      height: 400px;
      border: 1px solid black;
      position: relative;
    }

    .son {
      position: absolute;
      top: 50%;
      left: 50%;

      width: 388px;
      height: 166px;
      background-color: pink;
      /* 旧方案 */
      /* margin-left: -194px;
      margin-top: -83px; */
      /* 新方案 */
      transform: translate(-50%, -50%);
    }
  </style>
</head>

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

</html>

结果：

image.png

4.旋转

4.1旋转

image.png

<!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: 200px;
      background-color: pink;
      margin: 100px auto;
      transition: all 0.3s;

    }

    .box:hover {
      /* rotate: (角度 deg); */
      transform: rotate(360deg);
    }
  </style>
</head>

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

</html>

4.2转换原点

image.png

<!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: 10px;
      height: 300px;
      background-color: blue;
      margin: 100px auto;
      transition: all 0.3s;
      /* 默认以盒子为中心点 */
      /* 可以改变中心点 */
      /* 水平方向 垂直方向 */
      /* transform-origin: x y; */
      transform-origin: center bottom;
    }

    .box:hover {
      transform: rotate(166deg);
    }
  </style>
</head>

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

</html>

5 复合属性

实现轮胎平移又旋转
<!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 {
      height: 200px;
      width: 200px;
      transition: all 3s;

    }

    img:hover {
      /* 复合 */
      /* 位移x方向 800px */
      /* 旋转2圈 */
      /* 注意： 需要先写位移再写旋转*/
      transform: translateX(800px) rotate(720deg);
    }
  </style>
</head>

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

</html>

6.缩放

6.1缩放/放大

注意：给盒子设置缩放，其盒子的文字和子元素都会缩放/放大

image.png

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      transition: all 0.5s;
      background-color: pink;
    }

    .box:hover {
      /* scale:缩放比，没有单位
      常规语法：设置两个方向缩放比，只设置一个值，xy方向共用一个比例 */
      /* 大于1，放大，小于1则缩小 */
      transform: scale(2);
    }
  </style>
</head>

<body>
  <div class="box">我是黑马</div>
</body>

</html>

结果：

image.png

image.png

6.2 缩放案例

image.png

<!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: 150px;
      background-color: #ccc;
      margin: 100px auto;
      display: flex;

      /* 将开始图标在盒子中间显示 */
      /* 主轴对齐方式。 */
      justify-content: center;
      /* 测轴对齐方式。  */
      align-items: center;

      /* 溢出隐藏 */
      overflow: hidden;


    }

    img {
      transition: all 0.3s;
      transform: scale(10);
      /* 自己看不见 0为完全不可见 1为完全可见 */
      opacity: 0;
    }

    /*需求：鼠标移入谁，谁如何 鼠标进入整体盒子，img恢复正常 */
    .box:hover img {
      transform: scale(1);
      opacity: 1;
    }
  </style>
</head>

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

</html>

结果：

image.png

image.png

7.渐变

image.png

默认渐变位置是从上到下
第一个位置可以写方向 如：to right
第一个位置也可以写角度 如：45deg（也可以为负方向）

image.png

三种方向指定方式示例：
      /* 默认渐变方向是从上到下 */
      background-image: linear-gradient(red,blue,green,yellow);
      /* 第一个位置明确方向 */
      background-image: linear-gradient(to right, red, blue, green, yellow);
      /* 第一个位置也可以写具体角度 */
      background-image: linear-gradient(135deg, red, blue, green, yellow);

8.综合案例

8.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>
    .box {
      position: relative;
      width: 768px;
      height: 542px;
      border: 1px solid black;
      margin: 50px auto;
      /* 溢出隐藏 */
      overflow: hidden;

    }

    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(trasnparent, rgba(0, 0, 0, 0.5));
    }

    .info {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      box-sizing: border-box;
      padding: 30px 50px;
      color: #fff;

      transition: all 0.5s;
    }

    .box:hover .info {

      bottom: -60px;
    }

    .box:hover img {
      transform: scale(1.1);
    }

    .info h2 {
      margin-left: 80px;
    }
  </style>
</head>

<body>
  <div class="box">
    <img src="./images/product.jpg" alt="">
    <div class="mask"></div>
    <div class="info">
      <span>智能体</span>
      <h2>打造行业智能体，共建全场景智慧</h2>
      <a href="#">了解更多<span></span></a>
    </div>
  </div>
</body>

</html>

结果：

image.png

image.png

9.空间转换

image.png

image.png

9.1 3D位移

语法：transform:translate3d(x,y,z);

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      perspective: 800px;
    }

    .box {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
      transition: all 0.3s;
    }

    .box:hover {
      /* 1.三个方向的设置 */
      /* transform: translate3d(100px, 100px, 100px); */
      /* 2.单个方向的设置 */
      /* transform: translateX(100%);
      transform: translateY(100%); */
      /* z轴就是3D空间中的z轴，z轴的数值越大，元素离我们越近 */
      transform: translateZ(100px);
    }
  </style>
</head>

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

</html>

结果：

image.png

image.png

9.2 透视

image.png

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      /* 1.开启近大远小的效果
      2.一般添加给body
      3.范围（800~1200px） */
      perspective: 300px;
    }

    .box {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
      transition: all 0.3s;
    }

    .box:hover {
      /* 1.三个方向的设置 */
      /* transform: translate3d(100px, 100px, 100px); */
      /* 2.单个方向的设置 */
      /* transform: translateX(100%); */
      /* transform: translateY(100%); */
      /* z轴就是3D空间中的z轴，z轴的数值越大，元素离我们越近 */
      transform: translateZ(100px);
    }
  </style>
</head>

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

</html>

10.3D旋转

image.png

image.png

10.1 绕轴旋转

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      /* 1.开启近大远小的效果
      2.一般添加给body
      3.范围（800~1200px） */
      perspective: 300px;
    }

    .box {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
      transition: all 1s;
    }

    .box:hover {
      /* 旋转 确定围绕什么轴旋转 */
      transform: rotateX(90deg);
    }
  </style>
</head>

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

</html>

结果：

image.png

image.png

image.png

image.png

10.2 自定义轴旋转

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      /* 1.开启近大远小的效果
      2.一般添加给body
      3.范围（800~1200px） */
      perspective: 300px;
    }

    .box {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
      transition: all 1s;
    }

    .box:hover {
      /* 旋转 自定义轴的终点坐标 */
      transform: rotate3d(1, 1, 0, 60deg);
    }
  </style>
</head>

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

</html>

结果：

image.png

11. 3D立体呈现

image.png

<!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>
    /* 如果某个父级元素下的子元素，设置3D属性，那么要给这个父级元素设置3D呈现。 */
    .body {
      perspective: 300px;
    }

    .father {
      width: 200px;
      height: 200px;
      border: 1px solid black;
      margin: 100px auto;
      position: relative;
      transform-style: preserve-3d;
      transition: all 1s;
    }


    .father div {
      width: 200px;
      height: 200px;
    }

    .son1 {
      position: absolute;
      background-color: red;
      transform: translateZ(100px);
    }

    .son2 {
      position: absolute;
      background-color: blue;
    }

    .father:hover {
      transform: rotateY(90deg);
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="son1">A</div>
    <div class="son2">B</div>
  </div>
</body>

</html>

结果：

image.png

image.png

image.png

image.png

image.png

avatar
文章
阅读
粉丝