移动web学习第一天（缩放）

学习目标：

图片的缩放

---

学习内容：

HTML

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

css

   * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 250px;
            height: 200px;
            border: 1px solid #000;
            margin: 100px;
            line-height: 1.5;
            overflow: hidden;
        }

        .pic img {
            
            width: 100%;
        }

        /* 
            利用伪元素创建结构
            设置背景图片并水平垂直居中与pic盒子
            初始放大5倍 透明度置为0

            鼠标悬停box 让播放按钮结构缩放倍数变为1倍，透明度置为1
        */
        .pic{
            position: relative;
        }
        .pic::before{
            content: "";
            position: absolute;
            width: 58px;
            height: 58px;
            background: url(./images/play.png);
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%)
            scale(5);
            transition: all 0.5s;
            opacity: 0;

            
        }
        .pic:hover::before{
            transform: translate(-50%,-50%)
            scale(1);
            opacity: 1;
        }

---