• html+css制作盾牌飞入效果

    盾牌飞入

    一、效果图

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    二、页面背景设置

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

     *{
      margin:0;
      padding:0;
        }
        

    • 1
    • 2
    • 3
    • 4
    • 5
     /* 页面背景色（skyblue天空蓝） */

    • 1
      body{
        background-color:skyblue;
        }

    • 1
    • 2
    • 3

    在这里插入图片描述

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

    在这里插入图片描述

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

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

      background-color：red

    • 1

    在这里插入图片描述

    三、图片平移移动

    什么是平移？

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

    四、图片设置平移的方法

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

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

    效果图：
    右下角平移 右面平移 向下平移
    在这里插入图片描述
    在这里插入图片描述

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

      .wrap img:nth-child(1){
        transform:translate(-200px,200px) rotate(45deg);
    }

    • 1
    • 2
    • 3

    在这里插入图片描述

     .wrap img:nth-child(2){
        transform:translate(-400px,500px) rotate(85deg);
    }

    • 1
    • 2
    • 3
    .wrap img:nth-child(3){
    transform:translate(200px,300px) rotate(125deg);
}

    • 1
    • 2
    • 3

    在这里插入图片描述

    三张图片可以拆分和，九张图片是不是也可以？可以，在三张图片的基础上继续延续调整x,y轴
    角度方向就可以了，嘿嘿嘿。

           .wrap img:nth-child(1){
            transform:translate(-200px,200px) rotate(45deg);
        }
        .wrap img:nth-child(2){
            transform:translate(-400px,500px) rotate(85deg);
        }
        .wrap img:nth-child(3){
            transform:translate(200px,300px) rotate(125deg);
        }
        .wrap img:nth-child(4){
            transform:translate(300px,200px)rotate(145deg);
        }
        .wrap img:nth-child(5){
            transform:translate(-360px,246px)rotate(164deg);
        }
        .wrap img:nth-child(6){
            transform:translate(-248px,345px)rotate(175deg);
        }
        .wrap img:nth-child(7){
            transform:translate(-165px,360px)rotate(195deg);
        }
        .wrap img:nth-child(8){
            transform:translate(-255px,-167px)rotate(127px);
        }
        .wrap img:nth-child(9){
            transform:translate(-150px,105px)rotate(45deg);
        }
      

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    在这里插入图片描述

    /* 当鼠标进入容器时,让图片还原到原来的位置 */

     .wrap:hover img{
        transform:none;
    }

    • 1
    • 2
    • 3

    在这里插入图片描述

    五、放置图片的容器

    /* 放置图片的容器*/

    </head>
<body>
   <div class="wrap"> 
       <img src="images/shield_1_01.png"alt="">
       <img src="images/shield_1_02.png"alt="">
       <img src="images/shield_1_03.png"alt="">
       <img src="images/shield_1_04.png"alt="">
       <img src="images/shield_1_05.png"alt="">
       <img src="images/shield_1_06.png"alt="">
       <img src="images/shield_1_07.png"alt="">
       <img src="images/shield_1_08.png"alt="">
       <img src="images/shield_1_09.png"alt="">
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    在这里插入图片描述

    六 视频演示效果：

  • 相关阅读:
    【static】
    haproxy最强攻略
    MySQL驱动扯后腿？Spring Boot用虚拟线程可能比用物理线程还差
    const修饰详解
    4+1视图与UML
    luogu P1873 [COCI 2011/2012 #5] EKO / 砍树
    pytest fixture及conftest详解一 (各个参数的使用说明)
    (转帖)微服务拆分的原则和方法（2）
    改进的DBSCAN算法（附open3d python代码）
    vue+element纯手工完美模拟实现小米有品网站
  • 原文地址：https://blog.csdn.net/qq_62259825/article/details/125728620