html+css制作盾牌飞入效果

一、效果图

二、页面背景设置

/* 清除网页默认边距 */

 *{
   
      margin:0;
      padding:0;
        }
        

 /* 页面背景色（skyblue天空蓝） */

  body{
   
        background-color:skyblue;
        }

✋细心的人可能发现了一个问题？为什么背景色还有一个米黄色背景色？？？
第一个页面背景色是一个Body（整体）页面背景色，第二个背景色是为了确定图片当前所在位置✔️

img{
   
    transition:transform 1s;
}
.wrap{
   
    width:480px;
    height:494px;
    margin:0px auto;
}

/*背景色已提前删除（美观） */

  background-color：red

三、图片平移移动

什么是平移？

平移的定义：元素在原来的位置上直线移动。

四、图片设置平移的方法

1、通过“translate(x,y)”属性使元素在x轴和y轴方向同时移动；
2、通过“translate X(x)”属性使元素仅在x轴方向移动；
3、通过“translateY(y)”属性使元素仅在y轴方向移动。

📢 这个gift动态图有个缺陷：如下图所示：每次截图只显示一个，不能同时显示 🔪。

效果图：
右下角平移 右面平移 向下平移

/* 把前三个img标签:移动到外面 /
/ 平移来移动:transfrom:translate() */

  .wrap img:nth-child</