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

在这里插入图片描述

六视频演示效果：

相关阅读:
kubernetes-v1.23.3 部署 kafka_2.12-2.3.0
黑马mysql教程笔记（mysql8教程）基础篇——数据库相关概念、mysql安装及卸载、数据模型、SQL通用语法及分类（DDL、DML、DQL、DCL）
Reggie外卖项目 —— 小程序开发之短信发送
 【FAQ】应用内支付服务无法拉起支付页面常见原因分析和解决方法
 多线程之ThreadPoolExecutor
行车记录仪检测不到内存卡的原因
 比较两个数组内容是否相同
 UNDO自动管理和手工管理、闪回操作
 visual studio 安装包丢失或损坏
 【S1002基于vue+nodejs的学生竞赛报名管理系统-哔哩哔哩】 https://b23.tv/xhyyT9U
原文地址：https://blog.csdn.net/qq_62259825/article/details/125728620

html+css制作盾牌飞入效果

盾牌飞入

一、效果图

二、页面背景设置

三、图片平移移动

四、图片设置平移的方法

五、放置图片的容器

六 视频演示效果：

六视频演示效果：