CSS转换动画与移动web

最新推荐文章于 2024-01-29 09:00:00 发布
最新推荐文章于 2024-01-29 09:00:00 发布
阅读量838 收藏 5
点赞数
分类专栏： 自学笔记 文章标签： css web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61643292/article/details/124167039
版权

CSS转换与移动web

一.课前导学

  • 1.阶段目标：

    • 使用字体图标、平面转换、动画等C3属性丰富网页效果和呈现方式

  • 2.CSS3

    • 目标：使用平面、空间转换和动画属性，丰富网页元素

  • 3.Flex

    • 了解移动端和pc端屏幕和网页布局差异

  • 4.移动适配

    • 能够实现视口宽度不同时，网页元素宽高等比缩放效果

  • 5.响应式

    • 了解响应式网页特点，能够使用BootStrap框架开发响应式网页

1.转换与动画

1.1：字体图标

目标：使用字体图标技巧实现网页中简介的图标效果

步骤：

  • 引入图标库
  • 设置类名

注意：标签选择器优先级小于类选择器

思考：如果图标库没有项目所需的图标怎么办

答：

  • IconFont网站上传矢量图生成字体图标
  • 与设计师沟通，得到SVG矢量图
  • IconFont网站上传图标，下载使用

1.2：平面转换

目标：使用transform属性实现元素的位移、旋转、缩放等效果

平面转换

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

平面转换属性：transform

位移：

目标：使用translate实现元素位移效果

语法：

transform:translate(水平移动距离，垂直移动距离)

取值（正负均可）：

  1. 像素单位数值
  2. 百分比（参照物为盒子自身尺寸）
  3. 注意：X轴正向为右，Y轴正向为下

技巧：

  1. translate()如果只给出一个值，表示x轴方向移动距离
  2. 单独设置某个方向的移动距离：translateX() & translateY()

定位盒子居中：

<style>
    .father{
        position: relative;
        width:500px;
        height:300px;
        margin:100px auto;
        border: 1px solid #000;
    }
    
    .son{
        position:absolute;
        left:50%;
        top:50%;
        /*
        margin-left:-100px;
        margin-top: -50px;
        */
        
        transform:translate:translate(-50%,-50%)
            
        width:200px;
        height:100px;
        background-color:pink
    }
</style>

案例：双开门布局

   <style>
       *{
           margin:0;
           padding:0;
       }
       
       .box{
           width:1366px;
           height:600px;
           margin:0 auto;
           background:url('./image/bg.jpg')
      	   overflow:hidden;/*超出1366的都隐藏*/
       }
       
       
        .box::before, /*伪元素，不用新建标签*/
        .box::after{
            float: left;  /*开启浮动，让车的图上来*/
            content: ''; /*伪元素必须要有content*/
            width: 50%;
            height: 600px;
            background-image: url('./image/fm.jpg');
        }
       
       .box::after{
           background-position:right 0;  /*把图片呈现右边*/
         
       }
       /*hover  鼠标移入的时候的位置改变的效果*/
       .box:hover::before{
           transform:translateX(-100%)
       }
       .box:hover::after{
           transform:translateX(100%)
       }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>

1.3：旋转＋缩放

旋转：

目标：使用rotate实现元素旋转效果

  1. 语法

​ transform:rotate(角度)

​ 注意：角度单位是deg

  1. 技巧：取值政府均可

旋转效果：

<!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>
      img {
        width: 250px;
        transition: all 2s; /*旋转必须要有过度效果*/
      }

      img:hover {
        /*顺时针*/
        transform: rotate(360deg);

        /*逆时针*/
        /*transform: rotate(-360deg);*/
      }
    </style>
  </head>
  <body>
    <img src="旋转的图片" alt="" />
  </body>
</html>

转换原点

目标：使用transform-origin属性改变转换原点

语法：

默认原点是盒子中心点

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

取值：

方位名词：（left \ top \ right \ bottom \ center）

像素单位数值

百分比（参照盒子自身尺寸计算）

多重转换

目标：使用transform复合属性实现多形态转换

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YjbebC2c-1649905448422)(C:\Users\命与超然\AppData\Roaming\Typora\typora-user-images\image-20220411090550035.png)]

多重转换技巧

transform:translate() rotate()

轮胎转换实现效果：

<!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>Document</title>

    <style>
      .box {
        width: 800px;
        height: 200px;
        border: 1px solid #000;
      }
      img {
        width: 200px;
        transition: all 4s;
      }

      .box:hover img {
        /*边走边转*/
        /*旋转可以改变坐标轴向  必须先平移后旋转  且必须用复合属性*/
        transform: translate(600px) rotate(360deg);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="./img/tyre.png" alt="" />
    </div>
  </body>
</html>

1.4：平面转换-缩放

目标：使用scale改变元素的尺寸

语法：

transform:scale(x轴缩放倍数，y轴缩放倍数)

技巧

一般情况下，只为scale设置一个值，表示x轴和y轴等比例缩放

transform:scale(缩放倍数)

demo案例：

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        img {
            width: 100%;
        }

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

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

        .box .pic {
            position: relative;
        }

        .box .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;
        }

        /* lihover的时候,  谁变小pic::after */
        .box li:hover .pic::after {
            opacity: 1;
            transform: translate(-50%, -50%) scale(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>

1.5：渐变背景⭐

目标：使用background-image属性实现渐变背景效果

  1. 渐变是多个颜色逐渐变化的视觉效果
  2. 一般用于设置盒子的背景
background-image: linear-gradient{
    颜色1，
    颜色2
}

渐变练习demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 300px;
            height: 200px;
            /*background-image: linear-gradient(
            pink,
            green
            );*/    /*纯色渐变*/
            background-image: linear-gradient(
            transparent,
            rgba(0,0,0 , .6)
            );
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

产品展示小demo：

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

        .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;
        }
        /*遮盖*/
        .box .mask {
            position: absolute; /*子绝父相  将遮盖层覆盖在背景图身上*/
            left: 0;
            top: 0;        /*定义mask的位置*/

            /* display: none; */
            opacity: 0;          /*将其设为全透明*/
            width: 300px;
            height: 212px;
            background-image: linear-gradient(
                transparent,
                rgba(0,0,0,.6)
            );
            transition: all .5s;   /*有渐变的过程*/
        }

        .box:hover .mask {
            opacity: 1;           /*鼠标移动变成不透明*/
            /* display: block; */
        }
    </style>
</head>

<body>

    <div class="box">
        <img src="./images/product.jpeg" alt="">
        <div class="title">OceanStor Pacific 海量存储斩获2021 Interop金奖</div>
        <!-- 渐变背景 mask -->
        <div class="mask"></div>
    </div>
</body>

</html>

1.6：空间转换

目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果

  1. 空间：是从坐标轴角度定义的。x,y,z三条坐标轴构成了一个立体空间，z轴位置和实现方向相同
  2. 空间转换也叫3D转换
  3. 属性：transform

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NA1VhpTh-1649905448423)(C:\Users\命与超然\AppData\Roaming\Typora\typora-user-images\image-20220411182639235.png)]

空间位移：

目标：使用translate实现元素空间位移效果

语法：

  1. transform:translate3d(x,y,z)
  2. transform:translateX(值)
  3. transform:translateY(值)
  4. transform:translateZ(值)

取值（正负均可）

像素单位数值

百分比

小demo

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

<head>
  <meta charset="UTF-8">
  <title>空间位移</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }

    .box:hover {
      /* transform: translate3d(50px, 100px, 200px); */
      transform: translateX(100px);
      transform: translateY(100px);
      transform: translateZ(100px);
    }
  </style>
</head>

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

</html>

1.7：透视：

目标：使用perspective属性实现透视效果

属性（添加给父级）：

perspective：值

取值：像素单位数值，数值一般在800-1200之间

此值就是人的眼睛到屏幕的距离

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

<head>
  <meta charset="UTF-8">
  <title>透视效果</title>
  <style>
    body {
      perspective: 1000px;
      /* perspective: 200px; */
      /* perspective: 10000px; */
    }

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

    .box:hover{
      transform: translateZ(200px);
      /* transform: translateZ(-200px); */
    }
  </style>
</head>

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

</html>

1.8：空间旋转

目标：使用rotate实现元素空间旋转

语法：

transform：rotateZ(值)

transform：rotateX(值)

<!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>空间旋转-Y轴</title>
    <style>
        .box {
            width: 300px;
            margin: 100px auto;
        }

        img {
            width: 300px;
            transition: all 2s;
        }

        .box {
            /* 透视效果：近大远小，近实远虚 */
            perspective: 1000px;
        }

        .box img:hover {
            transform: rotateY(60deg);
            transform: rotateY(-60deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/hero.jpeg" alt="">
    </div>
</body>
</html>

左手法则：

判断旋转方向：左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YlnE3UNW-1649905448423)(C:\Users\命与超然\AppData\Roaming\Typora\typora-user-images\image-20220411195037167.png)]

1.9：立体呈现

目标：使用transform-style: preserve-3d呈现立体图形

呈现立体图形的步骤：

  1. 盒子父元素添加transform-style：preserve-3d

  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>
        .cube {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transition: all 2s;
            transform-style: preserve-3d;
        }

        .cube div {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
        }

        .front {
            background-color: orange;
            /* 向我走近200px */
            transform: translateZ(200px);
        }

        .back {
            background-color: green;
        }

        /* cube hover 为了看空间感效果 */
        .cube:hover {
            transform: rotateY(90deg);
        }
    </style>
</head>
<body>
    <div class="cube">
        <div class="front">前面</div>
        <div class="back">后面</div>
    </div>
</body>
</html>

3D导航练习

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D导航</title>
    <style>
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .navs {
            width: 300px;
            height: 40px;
            margin: 50px auto;
        }
        
        .navs li {
            position: relative;
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            transition: all .5s;
            transform-style: preserve-3d;

            /* 旋转: 让大家在写代码的过程中看到立体盒子 */
            /* transform: rotateX(-20deg) rotateY(30deg); */

            /* 测试缩放效果 */
            /* transform: scale3d(0.5, 1.1, 2); */
        }

        .navs li a {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            text-decoration: none;
            color: #fff;
        }
        
        .navs li a:first-child {
            background-color: green;
            transform: translateZ(20px);
        }
        
        .navs li a:last-child {
            background-color: orange;
            /* 躺平x轴旋转  立方体的顶部,位移z(确保看到这个盒子) */
            transform: rotateX(90deg) translateZ(20px);
        }

        /* li:hover 立方体旋转 */
        .navs li:hover {
            transform: rotateX(-90deg);
        }
    </style>
</head>

<body>
    <div class="navs">
        <ul>
            <li>
                <a href="#">首页</a>
                <a href="#">Index</a>
            </li>
            <li>
                <a href="#">登录</a>
                <a href="#">Login</a>
            </li>
            <li>
                <a href="#">注册</a>
                <a href="#">Register</a>
            </li>
        </ul>
    </div>
</body>

</html>

二.CSS3动画⭐

目标：使用animation添加动画效果

动画的本质是快速切换大量图片时在人脑中行成的具有连续性的画面

构成动画的最小单元：帧或动画帧

2.2：过渡和动画区别

过渡可以实现什么效果？

实现2个状态间的变化过程

动画效果：实现多个状态间的变化过程，动画过程可控（重复播放，最终画面，是否暂停）

2.3：动画的实现步骤

目标：使用animation添加动画效果

实现步骤：

1.定义动画

@keyframes 动画名称{
	from{}
	to{}
}

/*或者*/
@keyframes 动画名称{
	0% {}
	10% {}
	15% {}
	100% {}
}

2.使用动画

animation: 动画名称 动画花费时长

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 100px;
            background-color: pink;
            /*2.使用动画的属性*/
            animation: change 1s;
        }
        /*1.定义动画：从200变大到600*/
        /*@keyframes change {
            from{
                width: 200px;
            }
            to{
                width: 600px;
            }
        }*/
        /*2.定义动画：200到500*300到800*500*/
        /*百分比指的是动画总时长的占比*/
        @keyframes change {
            0% {
                width: 200px;
            }
            50% {
                width: 500px;
                height: 300px;
            }
            100% {
                width: 800px;
                height: 500px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2.4：动画属性：

目标：使用animation相关属性控制动画执行过程

animation：动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态

注意：

  1. 动画名称和动画时长必须赋值
  2. 取值不分先后顺序
  3. 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 100px;
            background-color: pink;
            /*2.使用动画的属性*/
            /*分布动画 重复三次播放*/
            /*animation: change 1s steps(3) 1s 3;*/

            /*无限循环  infinite表示无限循环*/
            /*animation: change 1s infinite;*/

            /*默认值，动画停留在最初的状态  backwards表示动画停留在最初的状态* /
            animation: change 1s backwards;
            /*动画停留在结束的状态 forwards表示动画停留在结束时的状态*/
            animation: change 1s forwards;
        }
        /*1.定义动画：从200变大到600*/
        @keyframes change {
            from{
                width: 200px;
            }
            to{
                width: 600px;
            }
        }

    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

拆分属性

目标：使用animation相关属性控制动画执行过程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tbtYOHLu-1649905448424)(C:\Users\命与超然\AppData\Roaming\Typora\typora-user-images\image-20220412095051923.png)]

目标：使用steps实现逐帧动画

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CIWnv4M5-1649905448424)(C:\Users\命与超然\AppData\Roaming\Typora\typora-user-images\image-20220412103025447.png)]

逐帧动画实现

目标：使用steps实现逐帧动画

2.5：精灵动画制作步骤

  1. 准备显示区域

​ 设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图

  1. 定义动画

​ 改变背景图的位置（移动的距离就是精灵图的宽度）

  1. 使用动画

​ 添加速度曲线steps(N)，N与精灵图上小图个数相同

​ 添加无限重复效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qdVBOk3i-1649905448424)(C:\Users\命与超然\AppData\Roaming\Typora\typora-user-images\image-20220412132202416.png)]

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            /*1680/12 保证显示区域的尺寸和一个精灵小图的尺寸相同*/
            width: 140px;
            height: 140px;
            border: 1px solid #000;
            background-image: url("./images/bg.png");
            /* 12：精灵小图的个数*/
            animation: move 1s steps(12) infinite;
        }

        @keyframes move {
            from {
                background-position: 0 0;

            }
            to {
                /* 1680:精灵图的宽度 */
                background-position: -1680px 0;
            }
        }
    </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

目标：能够使用animation属性给一个元素添加多个动画效果

animation:
    动画1，
    动画2，
    动画N
；

改进：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            /*1680/12 保证显示区域的尺寸和一个精灵小图的尺寸相同*/
            width: 140px;
            height: 140px;
            /*border: 1px solid #000;*/
            background-image: url("./images/bg.png");
            /* 12：精灵小图的个数*/
            animation: move 1s steps(12) infinite,
                        run 1s forwards;
        ;
        }

        @keyframes move {
            /*from {
                background-position: 0 0;

            }*/
            to {
                /* 1680:精灵图的宽度 */
                background-position: -1680px 0;
            }
        }
        @keyframes run {
            /*动画的开始状态和盒子的默认样式相同，可以省略from*/
            to{
                transform: translateX(800px);
            }
        }
    </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

三. 移动端⭐

3.1:PC端和移动端的不同点：

  1. PC端屏幕大，网页固定版心
  2. 手机屏幕小，网页宽度多数为100%

3.2:分辨率：

硬件分辨率（物理分辨率）：是生产屏幕时就固定的，它是不可被改变的

逻辑分辨率：是由软件（驱动）决定的

3.3:视口：

使用meta标签设置视口宽度，制作适配不同设备宽度的网页

目标：网页宽度和设备宽度（分辨率）相同

解决方法：添加视口标签

3.4:百分比布局：比较古老的一种布局方式

目标：能够使用百分比布局开发网页

  1. 百分比布局，也叫流式布局
  2. 效果：宽度自适应，高度固定

3.5:Flex：⭐

目标：能够使用Flex布局模型灵活、快速的开发网页

Flex布局/弹性布局

  1. 是一种浏览器提倡的布局模型
  2. 布局网页更加简单、灵活
  3. 避免浮动托镖的问题

Flex布局模型构成

作用：

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

设置方式：

父元素⭐添加display:flex 子元素可以自动地挤压或者拉伸

组成部分：

  1. 弹性容器
  2. 弹性盒子
  3. 主轴
  4. 测轴/交叉轴
  5. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3oZOnFxx-1649905448425)(C:\Users\命与超然\AppData\Roaming\Typora\typora-user-images\image-20220412222030849.png)]

视觉效果：子级一行排列/水平排列

水平排列：默认主轴在水平。弹性盒子都是沿着主轴排列

主轴对齐方式

目标：使用justify-content调节元素在主轴的对齐方式

修改主轴对齐方式属性：justify-content

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HMgyCVD0-1649905448425)(C:\Users\命与超然\AppData\Roaming\Typora\typora-user-images\image-20220412230443651.png)]

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;

            /* 居中 */
            justify-content: center;

            /* 间距在弹性盒子(子级)之间 */
            justify-content: space-between;

            /* 所有地方的间距都相等 */
            justify-content: space-evenly;

            /* 间距加在子级的两侧 */
            /* 视觉效果: 子级之间的距离是父级两头距离的2倍 */
            justify-content: space-around;
            
            height: 200px;
            margin: auto;
            border: 1px solid #000;
        }
        
        .box div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

侧轴对齐方式

目标：使用align-items调节元素在侧轴的对齐方式

修改侧轴对齐方式属性：

​ align-items(添加到弹性容器) <添加全部>

​ align-self :控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子） <添加个别子级>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pz1sd5j0-1649905448425)(C:\Users\命与超然\AppData\Roaming\Typora\typora-user-images\image-20220412231852598.png)]

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;

            /* 居中 */
            /* align-items: center; */

            /* 拉伸,默认值(现有状态,测试的时候去掉子级的高度) */
            /* align-items: stretch; */

            height: 300px;
            margin: auto;
            border: 1px solid #000;
        }
        
        .box div {
            /* width: 100px; */
            /* height: 100px; */
            background-color: pink;
        }

        /* 单独设置某个弹性盒子的侧轴对齐方式 */
        .box div:nth-child(2) {
            align-self: center;
        }
        
    </style>
</head>

<body>
    <div class="box">
        <div>1111</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

3.6:伸缩比

目标：使用flex属性修改弹性盒子伸缩比

属性

flex：值

取值分类：

数值（整数）

注意：只占用父盒子剩余尺寸

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;

            height: 300px;
            border: 1px solid #000;
        }

        .box div {
            height: 200px;
            margin: 0 20px;
            background-color: pink;
        }

        .box div:nth-child(1) {
            width: 50px;
        }

        .box div:nth-child(2) {
            /* 占用父级剩余尺寸的份数 */
            flex: 3;
        }

        .box div:nth-child(3) {
            flex: 1;
        }
        
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

修改主轴方向

目标：使用flex-derection改变元素排列方向

  1. 主轴默认是水平方向，侧轴默认是垂直方向
  2. 修改主轴方向属性：flex-ditection

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lXUxgyni-1649905448426)(C:\Users\命与超然\AppData\Roaming\Typora\typora-user-images\image-20220412234952309.png)]

弹性盒子换行

目标：使用flex-wrap实现弹性盒子多行排列效果

弹性盒子换行显示：

flex-wrap:wrap

调整行对齐方式：align-content

取值与justify-content基本相同

3.7:rem⭐

目标：能够使用rem单位设置网页元素的尺寸

rem单位

  1. 相对单位
  2. rem单位是相对于HTML标签的字号计算结果
  3. 1rem = 1HTML字号大小

rem移动适配：

媒体查询

目标：能够使用媒体查询设置差异化CSS样式

写法：

@media(媒体特性){
    选择器{
        css属性
    }
}

如：
@media(width:320px){
    html{
        font-size:32px
    }
}

目前rem布局方案中，将网页等分为10份，HTML标签的字号为视口宽度的1/10

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-um88a03D-1649905448426)(C:\Users\命与超然\AppData\Roaming\Typora\typora-user-images\image-20220413123426327.png)]

3.8:flexible⭐

目标：使用flexible.js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果

  1. flexible.js是手机淘宝开发出的一个用来适配移动端的js框架
  2. 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size

3.9:Less⭐

目标：使用Less语法快速编译生成CSS代码

  1. Less是一个CSS预处理器，less文件后缀是.less
  2. 扩充了CSS语言，使CSS具备一定的逻辑性，计算能力
  3. 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sUcb3FGo-1649905448426)(C:\Users\命与超然\AppData\Roaming\Typora\typora-user-images\image-20220413135334887.png)]

注释：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kmjQv2Mx-1649905448427)(C:\Users\命与超然\AppData\Roaming\Typora\typora-user-images\image-20220413145934060.png)]

计算

使用less运算写法完成px单位到rem单位的转换

运算：

  1. 加、减、乘直接书写计算表达式
  2. 除法需要添加小括号或者.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kSHr3Fe6-1649905448427)(C:\Users\命与超然\AppData\Roaming\Typora\typora-user-images\image-20220413150357129.png)]

嵌套：能够使用less嵌套写法生成后代选择器

作用：快速生成后代选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aCiCUc3T-1649905448428)(C:\Users\命与超然\AppData\Roaming\Typora\typora-user-images\image-20220413150704860.png)]

注意：

&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用

3.10 :变量⭐

能够使用Less变量设置属性值

把颜色提前存储到一个容器，设置属性值为这个容器名

变量：存储数据，方便使用和修改

语法：

  1. 定义变量：@变量名：值；
  2. 使用变量：css属性：@变量名；

3.11: 导入⭐

目标：能够使用Less导入写法引用其他Less文件

开发网站时，网页如何引入公共样式？

CSS:书写link标签

Less：导入

导入：@import ”文件路径“；

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fwZ35gaf-1649905448428)(C:\Users\命与超然\AppData\Roaming\Typora\typora-user-images\image-20220413152045437.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XnDr4F3n-1649905448428)(C:\Users\命与超然\AppData\Roaming\Typora\typora-user-images\image-20220413152102844.png)]

单独路径

在less文件的第一行，写到导出路径的相关代码

//out : ./abc/ （也可以设置导出样式表的名字）

通用路径：设置配置文件

禁止导出：（用于被i别人导入的less文件）

在less文件第一行添加：//out ：false

3.12:vw/vh⭐

目标：能够使用vw单位设置网页元素的尺寸

他们是相对单位

相对视口的尺寸计算结果

  • 1vw = 1/100视口宽度
  • 1vh = 1/100视口高度

vw适配原理

目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果

vw单位尺寸：

  1. 确认设计稿对应的vw尺寸（1/100视口宽度）
  2. vw单位尺寸 = px单位数值（1/100视口宽度）

vh同理

四.响应式布局⭐

4.1:定义

响应式网页的核心就是媒体查询

同一套代码适配不同的网页宽度

4.2:媒体查询⭐

定义：根据条件的不同设置不同的css样式

开发常用写法：

媒体特性常用写法

  • max-width
  • min-width
@media(媒体特性){
    选择器{
        样式
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*视口宽度小于等于768px，网页背景色是粉色*/
        @media (max-width: 768px) {
            body{
                background-color: pink;
            }
        }
        /*视口宽度大于等于1200px,网页背景色是skyblue*/
        @media (min-width: 1200px) {
            body{
                background-color: skyblue;
            }
        }
    </style>
</head>
<body>

</body>
</html>

书写顺序：为了避免css样式的重叠性

  • min-width（从小到大）
  • max-width（从大到小）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v0YJmNh9-1649905448429)(C:\Users\命与超然\AppData\Roaming\Typora\typora-user-images\image-20220413163027802.png)]

4.3: 外链式css引入

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gxpHWOld-1649905448429)(C:\Users\命与超然\AppData\Roaming\Typora\typora-user-images\image-20220413165313248.png)]

作属性没有@符号，也要加括号

视口检测

媒体查询之隐藏

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ioTBUOKI-1649905448429)(C:\Users\命与超然\AppData\Roaming\Typora\typora-user-images\image-20220413170633233.png)]

五.BootStrap⭐

5.1：介绍

目标：使用BootStrap框架快速开发响应式网页

BootStrap是由Twitter公司开发维护的前端UI框架，它提供了大量编写好的CSS样式，允许开发者结合一定HTML结构以及JS，快速编写功能完善的网页以及常见交互效果

使用步骤

1.引入：BootStrap提供的CSS代码

2.调用类：使用BS3提供的样式

container：响应式布局版心类

5.2 :BootStrap栅格系统⭐

目标：使用bs3栅格系统布局响应式网页

  • 栅格化是将整个网页的宽度分为若干等分
  • BS3默认将网页分成12等份

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hVggy4XR-1649905448429)(C:\Users\命与超然\AppData\Roaming\Typora\typora-user-images\image-20220414085327879.png)]

  • .container是BS3中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中
  • .container-fluid也是BS3中专门提供的类名，所有应用该类名的盒子，宽度均为100%
  • 分别使用.row类名和.col类名定义栅格布局的行和列
  • 注意：
    • container类自带间距15px
    • row类自带间距-15px

5.3：全局样式：

目标：掌握BS3手册用法，使用全局CSS样式美化标签

手册用法：

  • BS3预定义了大量类用来美化页面，掌握手册的查找方法是学习全局样式的重点
  • BS3中文文档-》 全局css样式 -》按分类导航查找目标类

vw尺寸（1/100视口宽度）
2. vw单位尺寸 = px单位数值（1/100视口宽度）

vh同理

四.响应式布局⭐

4.1:定义

响应式网页的核心就是媒体查询

同一套代码适配不同的网页宽度

4.2:媒体查询⭐

定义：根据条件的不同设置不同的css样式

开发常用写法：

媒体特性常用写法

  • max-width
  • min-width
@media(媒体特性){
    选择器{
        样式
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*视口宽度小于等于768px，网页背景色是粉色*/
        @media (max-width: 768px) {
            body{
                background-color: pink;
            }
        }
        /*视口宽度大于等于1200px,网页背景色是skyblue*/
        @media (min-width: 1200px) {
            body{
                background-color: skyblue;
            }
        }
    </style>
</head>
<body>

</body>
</html>

书写顺序：为了避免css样式的重叠性

  • min-width（从小到大）
  • max-width（从大到小）

[外链图片转存中…(img-v0YJmNh9-1649905448429)]

4.3: 外链式css引入

[外链图片转存中…(img-gxpHWOld-1649905448429)]

作属性没有@符号，也要加括号

视口检测

媒体查询之隐藏

[外链图片转存中…(img-ioTBUOKI-1649905448429)]

五.BootStrap⭐

5.1：介绍

目标：使用BootStrap框架快速开发响应式网页

BootStrap是由Twitter公司开发维护的前端UI框架，它提供了大量编写好的CSS样式，允许开发者结合一定HTML结构以及JS，快速编写功能完善的网页以及常见交互效果

使用步骤

1.引入：BootStrap提供的CSS代码

2.调用类：使用BS3提供的样式

container：响应式布局版心类

5.2 :BootStrap栅格系统⭐

目标：使用bs3栅格系统布局响应式网页

  • 栅格化是将整个网页的宽度分为若干等分
  • BS3默认将网页分成12等份

[外链图片转存中…(img-hVggy4XR-1649905448429)]

  • .container是BS3中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中
  • .container-fluid也是BS3中专门提供的类名，所有应用该类名的盒子，宽度均为100%
  • 分别使用.row类名和.col类名定义栅格布局的行和列
  • 注意：
    • container类自带间距15px
    • row类自带间距-15px

5.3：全局样式：

目标：掌握BS3手册用法，使用全局CSS样式美化标签

手册用法：

  • BS3预定义了大量类用来美化页面，掌握手册的查找方法是学习全局样式的重点
  • BS3中文文档-》 全局css样式 -》按分类导航查找目标类
左丘超然
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS3常用动画效果合集（最全），看看这篇文章吧
03-31 397
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】我特地针对初学者整理一套前端学习资料。
纯CSS3页面切换过渡动画
05-26
4种纯CSS3超酷页面切换过渡动画特效
html+div+动画效果,div交换css动画效果
weixin_39890708的博客
06-03 183
Document.my-container {margin: auto 0;padding: 10px;}.my-container>div:first-child {background:#c0cbff;margin: auto 0;padding: 10px;height: 130px;}.my-container>div:last-child {background: pink;m...
CSS过渡，转换与动画
qi_bai_jin的博客
10-04 3876
过渡，转换与动画的熟练应用能够将页面实现很好的效果，给用户一个更棒的体验，本文主要讲了过渡，转换与动画的基础，并涵盖了部分实战题目供大家练习，希望对大家有所帮助。
CSS | 自定义动画切换开关
分享技术类相关知识点、技巧，和大家一起成长。
06-12 455
自定义 CSS 动画切换开关
【CSS】css转换、css过渡、css动画_09
青春木鱼的博客
11-10 1349
css转换：改变元素在页面中的位置，大小，角度，形状；css过度：css值在两个状态间，在一段时间内平缓的变化过程；css动画：通过@keyframes 规则，您能够创建动画。
移动web 第二天空间转换、动画
12-25
移动Web 第二天空间转换、动画是指在移动Web 开发中使用CSS实现的空间转换和动画效果。本章节将讲解空间转换、动画的基本概念和实现方法。 一、空间转换 空间转换是指元素在三维空间中的位移、旋转、缩放等效果。...
Web前端基础：CSS3过渡&转换.pptx
05-06
2过渡属性课堂任务过渡动画综合应用要求：1、左上角圆形设置动画（移动）2、鼠标悬停出现图片3、鼠标悬停“哪有……”，文字变大加粗变颜色3转换应用CSS3 转换是对元素进行移动、缩放、转动、拉长或拉伸。3转换应用...
JS实现水平移动与垂直移动动画
10-15
总的来说，JS实现水平移动与垂直移动动画是JavaScript基础技能的一部分，理解这一过程有助于开发者更好地掌握DOM操作、事件处理和基本动画原理，为构建交互丰富的Web应用打下基础。通过不断学习和实践，可以掌握更...
浅析CSS3动画在Web前端中的应用.docx
10-25
过渡（Transitions）则是CSS3中另一个与动画相关的属性，它允许元素从一种样式平滑地转换到另一种样式。当某个属性值改变时，过渡属性定义了这个变化的速度。例如： ```css div { width: 100px; height: 100px; ...
HTML5、CSS和JavaScript与Web移动应用的未来趋势.pdf
10-05
2. **CSS3的进化**：CSS3引入了新的选择器、边框和背景样式、动画和转换效果，使得网页的视觉表现力更加强大。媒体查询（Media Queries）则实现了响应式设计，让网页可以根据设备的屏幕尺寸和方向自动调整布局，适应...
css3动态图标选项卡切换带动画效果
11-22
css3动态图标选项卡切换带动画效果
HTML5CSS3图片左右切换弹性动画
10-20
这个一个使用HTML5、CSS3、javascript实现图片左右切换弹性动画的代码，动画切换时很酷炫，适合新手学习，欢迎下载，有什么疑问，可以私聊我哟~~~~~~~
css3切换效果
05-10
css3的切换效果
jq+css多种动画切换效果的轮播图
12-05
支持13种动画效果的轮播图，可自己设定显示效果，也可随机动画效果。移植方便简单，部分参数可根据实际情况自由修改。
CSS样式变换效果及动画
Mr_Rongyao的博客
11-12 923
CSS的变换效果transform 2d转换translate（）进行平移效果，有2个参数对应X、Y轴。scale()用于缩放标签，当参数只有一个时，整体放大和缩小，当参数是两个时，可以分别调整x、y轴的缩放倍数。rotate（）用于旋转元素。rotateX() rotateY() rotateZ() 分别绕着xyz轴旋转skew()有两个参数分别代表在x轴方向的扭曲程度，以及在y轴方向的扭曲程度。matrix()把所有2D转换方法组合在一起。
炫酷CSS3页面过渡切换动画js特效
ICode联盟
07-18 1762
4种效果非常炫酷的纯CSS3页面切换过渡动画特效。该CSS3页面过渡动画使用CSSkeyframes制作而成，所有的动画效果和延时都是使用CSS属性，没有任何的javascripttimeout()代码。
CSS进阶技术：过渡效果(CSS transition)、动画效果(CSS animation)和变换效果(CSS transform)
WPHunter的编程技术资料库！
01-29 3075
​ 本指南将帮助你快速掌握三种强大的功能：过渡、动画和变换。对于那些已经掌握了CSS 基础知识，并希望创建出与众不同、经得起时间考验的网站的网页设计师和开发人员来说，了解和使用这些高级技术是必不可少的。 在学习本指南的过程中，你将获得宝贵的技能，让你的网站项目超越平凡。希望你还能从中获得一些灵感。
HTML5和CSS3提高（补充）—C3渐变 2D转换 动画
m0_59030524的博客
12-07 170
2.3 CSS3 渐变 CSS 渐变是 CSS3 图像模块中添加的新类型的图像。CSS 渐变允许您在 两个或多个指定颜色之间显示平滑过渡。 浏览器支持两种类型的渐变： 线性渐变（Linear Gradients）：向下/向上/向左/向右/对角方向，用 linear-gradient() 函数定义 径向渐变（Radial Gradients）：由它们的中心定义，用 radial-gradient() 函数定义 2.6.1 线性渐变 语法 background: linear-gradient(di
css动画效果上下移动
最新发布
03-06
在CSS中，可以使用动画效果实现元素的上移动。以下是一种常见的实现方式： 1. 首先，需要定义一个CSS动画关键帧（@keyframes），用于描述元素的移动过程。例如，我们可以定义一个名为"move"的关键帧，将元素从初始...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

左丘超然

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值