CSS新特性

过渡

作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
属性名：transition
使用: transition:all 1s ( 过渡时长:数字+s 秒)

注意点：

  1. 过渡需要：默认状态 和 hover状态样式不同，才能有过渡效果
  2. transition属性给需要过渡的元素本身加

  3. transition属性设置在不同状态中，效果不同的① 给默认状态设置，鼠标移入移出都有过渡效果② 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果

    1. <head>
    2.  <meta charset="UTF-8">
    3.  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    4.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5.  <title>Document</title>
    6.  <style>
    7.      div{
    8.          width: 200px;
    9.          height: 200px;
    10.          background: pink;
    12.          /* 过渡 一般放到元素本身,鼠标移入移出都有效果, 如果放到hover里面,只有移入才会有效果*/
    13.          /* transition: width 1s;  *//* 宽度 1秒钟 */
    14.          /* transition: all 1s; */ /* 全部 1秒钟 */
    15.      }
    16.      div:hover{
    17.          width: 800px;
    18.          height: 400px;
    19.          transition: all 1s;  /* 过渡放到hover里面,只有移入才有效果,移出时没有 */
    20.      }
    21.  </style>
    22. </head>
    23. <body>
    24.  <div></div>
    25. </body>

    位移

    目标
    使用translate实现元素位移效果
    语法
    transform: translate(水平移动距离, 垂直移动距离);
    transform: translateX() 单独x轴
    transform: translateY() 单独Y轴
    取值（正负均可）
    像素单位数值 百分比（参照物为盒子自身尺寸）
    注意：X轴正向为右，Y轴正向为下
    技巧
    translate()如果只给出一个值, 表示x轴方向移动距离
    单独设置某个方向的移动距离：translateX() & translateY()

    1. <head>
    2.  <meta charset="UTF-8">
    3.  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    4.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5.  <title>Document</title>
    6.  <style>
    7.      .father{
    8.          width: 500px;
    9.          height: 500px;
    10.          border:1px solid black;
    11.      }
    12.      .son{
    13.          width: 200px;
    14.          height: 100px;
    15.          background: pink;
    16.          transition: all 1s;/* 让儿子的移动有过渡效果 */
    17.      }
    18.      /* 鼠标移入盒子的时候,son改变位置 */
    19.      .father:hover .son{
    20.          /* 往右移动 */
    21.          /* transform: translateX(100px); */
    22.          transform: translateX(50%);/* 50%是相对于小盒子自身的 */
    24.          /* 往下移动 */
    25.          /* transform: translateY(100px); */
    26.          transform: translateY(50%);
    28.          /* 向右向下移动100px */
    29.          transform: translate(100px,100px);
    31.          /* translate里面只有一个值的话,表示往x轴的方向 */
    32.          transform:translate(300px) ;
    33.      }
    34.  </style>
    35. </head>
    36. <body>
    37.  <div class="father">
    38.      <div class="son"></div>
    39.  </div>
    40. </body>

    旋转

    目标
    使用rotate实现元素旋转效果
    语法
    transform: rotate(角度deg);
    注意：角度单位是deg
    技巧：取值正负均可
    取值为正, 则顺时针旋转 取值为负, 则逆时针旋转

    1. <head>
    2.  <meta charset="UTF-8">
    3.  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    4.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5.  <title>Document</title>
    6.  <style>
    7.      img{
    8.          transition: all 1s;/* 过渡 */
    9.      }
    10.      img:hover{
    11.          /* 顺 */
    12.          transform: rotate(30deg);/* 旋转 */
    14.          /* 逆 */
    15.          transform: rotate(-30deg);/* 旋转 */
    16.      }
    17.  </style>
    18. </head>
    19. <body>
    20.  <img src="./img/rotate.png" alt="">
    21. </body>

    渐变

    目标：
    使用background-image属性实现渐变背景效果
    特点
    渐变是多个颜色逐渐变化的视觉效果
    一般用于设置盒子的背景
    语法
    background-image: linear-gradient(颜色1,颜色2, );
    background-image: linear-gradient(transparent, rgba(0,0,0, .6) );

取值
可以是关键字 或者 rgb rgba transparent(透明)

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         div{
  8.             width: 200px;
  9.             height: 200px;
  11.             background-image: linear-gradient(
  12.                 pink,
  13.                 hotpink
  14.             );
  16.             background-image: linear-gradient(
  17.                 transparent,/* 透明 */
  18.                 rgba(0,0,0,.5)
  19.             );
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div></div>
  25. </body>

动画

概念
动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
构成动画的最小单元：帧或动画帧
语法
1,先定义动画
@keyframes 动画名称 {
0%{
width: 200px;
}
100%{
width: 600px;
}
}
2, 使用动画
使用animation相关属性控制动画执行过程
animation: 动画名称 动画花费时长 ;
animation: change 1s infinite; (infinite 无限次重复动画)

注意
动画名称和动画时长必须赋值
取值不分先后顺序
如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         div{
  8.             width: 200px;
  9.             height: 200px;
  10.             background: pink;
  12.             /* 二,使用动画 */
  13.             animation: change 1s infinite;
  14.         }
  16.         /* 一,定义动画 宽度从200变到600*/
  17.         /* @keyframes change {
  18.             from{
  19.                 width: 200px;
  20.             }
  21.             to{
  22.                 width: 600px;
  23.             }
  24.         } */
  26.         @keyframes change {
  27.             0%{
  28.                 width: 200px;
  29.             }
  30.             100%{
  31.                 width: 600px;
  32.             }
  33.         }
  36.     </style>
  37. </head>
  38. <body>
  39.     <div></div>
  40. </body>

flex布局

概念

Flex布局/弹性布局：
是一种浏览器提倡的布局模型
布局网页更简单、灵活
避免浮动脱标的问题

作用

  1. 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。     <br />    Flex布局非常适合结构化布局

设置方式

父元素添加 display: flex，子元素可以自动的挤压或拉伸

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         .father{
  8.             display: flex;
  9.             /* height: 300px; *//* 父元素不会受到子元素脱标的影响,依然有高度 */
  10.             justify-content: space-between;/* 很方便的控制元素的显示效果 */
  11.             background: pink;
  12.         }
  13.         .son{
  14.            /*  float: left; */
  15.             width: 100px;
  16.             height: 100px;
  17.             background: skyblue;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <!-- .father>.son{$}*3 -->
  23.     <div class="father">
  24.         <div class="son">1</div>
  25.         <div class="son">2</div>
  26.         <div class="son">3</div>
  27.     </div>
  28. </body>

组成部分

  1.    1  弹性容器(父元素)<br />    2 弹性盒子(子元素)<br />    3 主轴(默认是水平方向,元素就会水平排布)<br />    4 侧轴/交叉轴
  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         .father{
  8.             /* 1,在父级中设置布局方式 : 视觉效果:元素水平排布*/
  9.             /* 水平排布的原因: 默认主轴在水平方向,弹性盒子,都是沿着主轴排布 */
  10.             display: flex;
  11.             height: 300px;
  12.             background: pink;
  13.         }
  14.         .son{
  15.             width: 100px;
  16.             height: 100px;
  17.             background: skyblue;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <!-- .father>.son{$}*3 -->
  23.     <div class="father">
  24.         <div class="son">1</div>
  25.         <div class="son">2</div>
  26.         <div class="son">3</div>
  27.     </div>
  28. </body>

主轴对齐方式

在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。
修改主轴对齐方式属性: justify-content
flex-start 默认 从左边开始
center 水平居中
space-between 间隙就在子元素之间(两边没有间隙)
space-around 两边有间隙,并且两边的间隙是中间间隙的一半
space-evenly 间隙等分

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         .father{
  8.             /* 1,在父级中设置布局方式 : 视觉效果:元素水平排布*/
  9.             /* 水平排布的原因: 默认主轴在水平方向,弹性盒子,都是沿着主轴排布 */
  10.             display: flex;
  12.             /* 设置主轴对齐方式 */
  14.             /* 不常用 */
  15.             justify-content: flex-start;/* 默认:从左开始 */
  16.             justify-content: flex-end;/* 默认 从右边开始 */
  18.             /* 居中 */
  19.             justify-content: center;
  21.             /* 间距在弹性盒子(子级元素)之间 */
  22.             justify-content: space-between;
  24.             /* 所有地方的间距都相等 */
  25.             justify-content: space-evenly;
  27.             /* 间距加在子级两侧 */
  28.             /* 视觉效果:子级之间的距离是父级两头距离的2倍 */
  29.             justify-content: space-around;
  31.             height: 300px;
  32.             background: pink;
  33.         }
  34.         .son{
  35.             width: 100px;
  36.             height: 100px;
  37.             background: skyblue;
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42.     <!-- .father>.son{$}*3 -->
  43.     <div class="father">
  44.         <div class="son">1</div>
  45.         <div class="son">2</div>
  46.         <div class="son">3</div>
  47.     </div>
  48. </body>

侧轴对齐方式

修改侧轴对齐方式属性:
align-items（添加到弹性容器）
flex-start 默认 从上面开始
center 垂直居中
stretch 拉伸 默认(子元素不写高度的情况下)

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         .father{
  8.             /* 1,在父级中设置布局方式 : 视觉效果:元素水平排布*/
  9.             /* 水平排布的原因: 默认主轴在水平方向,弹性盒子,都是沿着主轴排布 */
  10.             display: flex;
  12.             /* 设置侧轴对齐方式 */
  14.             /* 几乎不用 */
  15.             /* align-items: flex-start */ /* 默认 上面排布 */
  16.             /*  align-items: flex-end; */  /* 下面排布*/
  18.             /* 居中 */
  19.             /* align-items: center; */
  21.             /* 拉伸,默认值(测试的时候,需要去掉子级的高度,才有效果) */
  22.             align-items: stretch;
  24.             height: 300px;
  25.             background: pink;
  26.         }
  27.         .son{
  28.             width: 100px;
  29.             /* height: 100px; */
  30.             background: skyblue;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <!-- .father>.son{$}*3 -->
  36.     <div class="father">
  37.         <div class="son">1</div>
  38.         <div class="son">2</div>
  39.         <div class="son">3</div>
  40.     </div>
  41. </body>
  1. **align-self：** 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）,即单独修改某个子级元素的属性
  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         .father{
  8.             /* 1,在父级中设置布局方式 : 视觉效果:元素水平排布*/
  9.             /* 水平排布的原因: 默认主轴在水平方向,弹性盒子,都是沿着主轴排布 */
  10.             display: flex;
  12.             height: 300px;
  13.             background: pink;
  14.         }
  15.         .son{
  16.             width: 100px;
  17.             height: 100px;
  18.             background: skyblue;
  19.         }
  20.         .son:nth-child(2){
  21.             align-self: center;/* 单独设置第二个子级元素侧轴居中对齐 */
  22.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <!-- .father>.son{$}*3 -->
  28.     <div class="father">
  29.         <div class="son">1</div>
  30.         <div class="son">2</div>
  31.         <div class="son">3</div>
  32.     </div>
  33. </body>

弹性盒子尺寸特点

特点总结
给宽给高,就按你给的走,不给,就按内容走,如果有拉伸,就拉伸的跟它的父级一样大

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         .father{
  8.             /* 1,在父级中设置布局方式 : 视觉效果:元素水平排布*/
  9.             /* 水平排布的原因: 默认主轴在水平方向,弹性盒子,都是沿着主轴排布 */
  10.             display: flex;
  12.             height: 300px;
  13.             background: pink;
  14.         }
  15.         .son{
  16.             /* width: 100px; */ /*如果去掉宽度,1,2,3都是靠自己的的内容决定宽度 */
  17.             /* height: 100px; */ /* 如果去掉高度,1,3就会被拉伸跟父级一样的高度(默认是stretch),2由于单独设置了居中,靠内容撑开 */
  18.             background: skyblue;
  19.         }
  20.         .son:nth-child(2){
  21.             align-self: center;/* 单独设置第二个子级元素侧轴居中对齐 */
  22.         }
  24.         /* 特点总结
  25.             给宽给高,就按你给的走,不给,就按内容走,如果有拉伸,就拉伸的跟它的父级一样大
  26.         */
  28.     </style>
  29. </head>
  30. <body>
  31.     <!-- .father>.son{$}*3 -->
  32.     <div class="father">
  33.         <div class="son">11111</div>
  34.         <div class="son">2</div>
  35.         <div class="son">3</div>
  36.     </div>
  37. </body>

伸缩比

使用flex属性修改弹性盒子伸缩比,实现盒子宽度不一样

flex:数值 取父元素剩余宽度的xx份
属性
flex : 值;
取值分类
数值(整数)
注意 : 只占用父盒子剩余尺寸

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         .father{
  8.             /* 1,在父级中设置布局方式 : 视觉效果:元素水平排布*/
  9.             /* 水平排布的原因: 默认主轴在水平方向,弹性盒子,都是沿着主轴排布 */
  10.             display: flex;
  11.             height: 300px;
  12.             background: pink;
  13.         }
  14.         .son{
  15.             height: 100px;
  16.             margin: 0 20px;/* 为了让子级之间有间距,设置左右外边距为20px */
  17.             background: skyblue;
  18.         }
  19.         .son:nth-child(1){
  20.             width: 50px;
  21.         }
  22.         .son:nth-child(2){
  23.             flex: 1;/* 只占用父级剩余尺寸的一份 */
  24.         }
  25.         .son:nth-child(3){
  26.             flex: 2;/* 只占用父级剩余尺寸的二份 */
  27.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <!-- .father>.son{$}*3 -->
  33.     <div class="father">
  34.         <div class="son">1</div>
  35.         <div class="son">2</div>
  36.         <div class="son">3</div>
  37.     </div>
  38. </body>

主轴方向

使用flex-direction改变元素排列方向
主轴默认是水平方向, 侧轴默认是垂直方向
修改主轴方向属性: flex-direction

修改轴向
flex-direction: column 此时主轴就是垂直方向,侧轴就变成水平方向了
如果要实现水平居中:align-items:center
如果要实现垂直居中:justify-content:center

修改轴向示例:

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         li{
  8.             list-style: none;
  9.             width: 80px;
  10.             height: 80px;
  11.             border: 1px solid black;
  13.             display: flex;
  15.             /* 修改主轴方向: 列的方向 */
  16.             /* 视觉效果:以前图片和文字是横着排布的,现在变成竖着排布了 */
  17.             flex-direction: column;
  18.         }
  19.         img{
  20.             width: 32px;
  21.             height: 32px;
  22.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <!-- div>ul>li>img+span -->
  28.     <div>
  29.         <ul>
  30.             <li><img src="img/media.png" alt=""><span>媒体</span></li>
  31.         </ul>
  32.     </div>
  33. </body>

修改轴向后的对齐方式示例:

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         li{
  8.             list-style: none;
  9.             width: 80px;
  10.             height: 80px;
  11.             border: 1px solid black;
  13.             display: flex;
  15.             /* 修改主轴方向: 列的方向 */
  16.             /* 视觉效果:以前图片和文字是横着排布的,现在变成竖着排布了 */
  17.             flex-direction: column;
  19.             /* 视觉效果: 实现子级元素水平居中  因为侧轴现在在水平方向上 */
  20.             align-items: center;
  22.             /* 视觉效果: 实现子级元素垂直居中  因为主轴现在在垂直方向上*/
  23.             justify-content: center;
  25.             /* 
  26.                 一旦修改了轴向(先确定主轴方向,再选择对应的属性实现主轴或者侧轴对齐方式)
  27.             */
  28.         }
  29.         img{
  30.             width: 32px;
  31.             height: 32px;
  32.         }
  34.     </style>
  35. </head>
  36. <body>
  37.     <!-- div>ul>li>img+span -->
  38.     <div>
  39.         <ul>
  40.             <li><img src="img/media.png" alt=""><span>媒体</span></li>
  41.         </ul>
  42.     </div>
  43. </body>

弹性盒子换行

弹性盒子换行显示 : flex-wrap: wrap;
使用flex-wrap属性
默认是不换行的,取值为nowrap
如果需要换行,修改值为wrap

<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>Document</title>
    <style>
        .father{
            display: flex;
            /* 默认值:不换行 */
            flex-wrap: nowrap;

            /* 换行 */
            flex-wrap: wrap;

            height: 500px;
            background: pink;
        }
        .son{
            width: 100px;
            height: 100px;
            background: skyblue;
        }
        .son:nth-child(1){
            background: red;
        }
        .son:nth-child(2){
            background: green;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
        <div class="son">4</div>
        <div class="son">5</div>
        <div class="son">6</div>
        <div class="son">7</div>
        <div class="son">8</div>
    </div>
</body>

调整行的对齐方式 ：align-content (取值与justify-content基本相同)
center: 居中
space-around:中间间隙是两边间隙的两倍
space-between:两边没有间隙

<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>Document</title>
    <style>
        .father{
            display: flex;
            /* 默认值:不换行 */
            flex-wrap: nowrap;

            /* 换行 */
            flex-wrap: wrap;

            /* 设置行的对齐方式 */
            align-content: center;/* 居中 */
            align-content: space-around;/* 中间间隙是两边间隙的两倍 */
            align-content: space-between;/* 两边没有间隙 */

            height: 500px;
            background: pink;
        }
        .son{
            width: 100px;
            height: 100px;
            background: skyblue;
        }
        .son:nth-child(1){
            background: red;
        }
        .son:nth-child(2){
            background: green;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
        <div class="son">4</div>
        <div class="son">5</div>
        <div class="son">6</div>
        <div class="son">7</div>
        <div class="son">8</div>
    </div>
</body>