[移动开发] css3，flex笔记

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> css3，flex笔记 -> 正文阅读

[移动开发]css3，flex笔记

做个笔记，方便自己查看
::before

双开门

<!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 {
            width: 1366px;
            height: 600px;
            margin: 0 auto;
            background: url('./images/bg.jpg');
            overflow: hidden;
        }
        
        .box::before,
        .box::after {
            float: left;
            content: '';
            width: 50%;
            height: 600px;
            background-image: url(./images/fm.jpg);
            transition: all .5s;
        }

        .box::after {
            background-position: right 0;
        }

        /* 鼠标移入的时候的位置改变的效果 */
        .box:hover::before {
            transform: translate(-100%);
        }

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

<body>
    <div class="box">

    </div>
</body>

</html>

在这里插入图片描述

和平精英缩放

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

在这里插入图片描述

精灵图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>精灵动画</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;
        }
    }

    /* 定义一个盒子移动的动画  800px */
    @keyframes run {
      /* 动画的开始状态和盒子的默认样式相同的, 可以省略开始状态的代码 */
      /* from {
        transform: translateX(0);
      } */
      to {
        transform: translateX(800px);
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</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>
      * {
        padding: 0;
        margin: 0;
      }
      li {
        list-style: none;
      }

      img {
        width: 200px;
      }
      
      .box {
        width: 600px;
        height: 112px;
        border: 5px solid #000;
        margin: 100px auto;
        overflow: hidden;
      }

      .box ul {
        width: 2000px;
        animation: move 5s infinite linear;
      }

      .box li {
        float: left;
      }

      /* 定义动画:位移, ul 左侧使用  x -1400  */
      @keyframes move {
        to {
          transform: translateX(-1400px);
        }
      }

      /* 用户鼠标移入box,动画暂停 */
      .box:hover ul {
        animation-play-state: paused;
      }
      
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li><img src="./images/1.jpg" alt="" /></li>
        <li><img src="./images/2.jpg" alt="" /></li>
        <li><img src="./images/3.jpg" alt="" /></li>
        <li><img src="./images/4.jpg" alt="" /></li>
        <li><img src="./images/5.jpg" alt="" /></li>
        <li><img src="./images/6.jpg" alt="" /></li>
        <li><img src="./images/7.jpg" alt="" /></li>

        <!-- 第567移动的时候,显示区域不能留白 -->
        <li><img src="./images/1.jpg" alt="" /></li>
        <li><img src="./images/2.jpg" alt="" /></li>
        <li><img src="./images/3.jpg" alt="" /></li>
      </ul>
    </div>
  </body>
</html>

在这里插入图片描述

伸缩：

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

购物车案例

<!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="./lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/orders.css">
</head>
<body>
    <!-- 主体内容: 滑动查看 -->
    <div class="main">
        <!-- 用户信息 -->
        <div class="pannel user_msg">
            <div class="location">
                <i class="iconfont icon-location"></i>
            </div>
            <div class="user">
                <div class="top">
                    <h5>林丽</h5>
                    <p>18500667882</p>
                </div>
                <div class="bottom">北京市  海淀区  中关村软件园   信息科技大厦1号
                    楼410#   </div>
            </div>
            <div class="more">
                <i class="iconfont icon-more"></i>
            </div>
        </div>
        <!-- 用户信息 -->
    </div>
    <!-- 主体内容: 滑动查看 -->

    <!-- 底部支付: 固定定位 -->
    <div class="pay">
        <div class="left">
            合计: <span class="red">￥<i>266.00</i></span>
        </div>
        <div class="right">
            <a href="#">去支付</a>
        </div>
    </div>
    <!-- 底部支付: 固定定位 -->
</body>
</html>

body {
    background-color: #f7f7f8;
}

/* 公共样式 */
.red {
    color: #cf4444;
}

.pannel {
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 5px;
}

/* 主体内容 */
.main {
    /* 80px: 为了内容不被底部区域盖住 */
    padding: 12px 11px 80px;
}

/* 用户信息 */
.user_msg {
    display: flex;
    align-items: center;
    padding: 15px 0 15px 11px;
}

.user_msg .location {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    background-image: linear-gradient(90deg, 
		#6fc2aa 5%, 
		#54b196 100%);
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    color: #fff;
}

.user_msg .user {
    flex: 1;
}

.user_msg .user .top {
    display: flex;
}

.user_msg .user .top h5 {
    width: 55px;
    font-size: 15px;
    font-weight: 400;
}

.user_msg .user .top p {
    font-size: 13px;
}

.user_msg .user .bottom {
    margin-top: 5px;
    font-size: 12px;
}

.user_msg .more {
    width: 44px;
    height: 44px;
    /* background-color: pink; */
    text-align: center;
    line-height: 44px;
    color: #808080;
}







/* 主体内容 */

/* 底部支付 */
.pay {
    position: fixed;
    left: 0;
    bottom: 0;

    display: flex;
    /* 主轴对齐方式 */
    justify-content: space-between;
    /* 侧轴对齐方式 */
    align-items: center;

    width: 100%;
    height: 80px;

    padding: 0 11px;
    /* background-color: pink; */
    border-top: 1px solid #ededed;
}

.pay .left {
    font-size: 12px;
}

.pay .left i {
    font-size: 20px;
}

.pay .right a {
    display: block;
    width: 90px;
    height: 35px;
    background-image: linear-gradient(90deg, 
		#6fc2aa 5%, 
		#54b196 100%);
    border-radius: 3px;
    text-align: center;
    line-height: 35px;
    font-size: 13px;
    color: #fff;
    
}
/* 底部支付 */