fix

blog/front-end-combat/demo/transform-scale.html

+<style>
+    .box {
+        margin: 0 auto;
+        height: 250px;
+        width: 200px;
+        border: 1px solid #666;
+        overflow: hidden;
+        text-align: center;
+    }
+
+    .cover {
+        width: 200px;
+        height: 150px;
+        background-color: skyblue;
+        position: relative;
+    }
+
+    .cover::after {
+        /* 居中布局 */
+        position: absolute;
+        content: '';
+        left: 50%;
+        top: 50%;
+
+
+
+        background-image: url(../img/play-circle.png);
+        background-size: contain;
+        width: 40px;
+        height: 40px;
+
+        transition: all .5s;
+
+        /* 居中可以使用 margin 也可以使用 translate */
+        /* 放大 */
+        /* margin-left: -20px;
+        margin-top: -20px; 
+        transform: scale(5); */
+        transform: translate(-50%, -50%) scale(5);
+        /* 透明 */
+        opacity: 0;
+    }
+
+    .box:hover .cover::after {
+        /* transform: scale(1); */
+        transform: translate(-50%, -50%) scale(1);
+        opacity: 1;
+    }
+</style>
+
+<div class="box">
+    <div class="cover"></div>
+
+    <p>欲把西湖比西子</p>
+    <p>淡妆浓抹总相宜</p>
+</div>
\ No newline at end of file

blog/front-end-combat/transform.md

@@ -105,3 +105,30 @@ transform: translate() rotate();
 [](demo/transform-translate-rotate.html ':include :type=code')
 
 [](demo/transform-translate-rotate.html ':include height=240')
+
+## 缩放 scale
+
+实现元素从中心点缩放效果
+
+语法
+
+```css
+transform: scale(x轴缩放倍数, y轴缩放倍数);
+
+/* x、y等比例缩放 */
+transform: scale(缩放倍数);
+```
+
+| 效果 | 取值   | 示例       |
+| ---- | ------ | ---------- |
+| 放大 | 数值>1 | scale(1.2) |
+| 不变 | 数值=1 | scale(1)   |
+| 缩小 | 数值<1 | scale(0.8) |
+
+示例：
+
+[](demo/transform-scale.html ':include :type=code')
+
+[](demo/transform-scale.html ':include height=270')
+
+https://www.bilibili.com/video/BV1xq4y1q7jZ?p=19&spm_id_from=pageDriver