＜CSS＞写一个简单的动画

​​​​​​​目录

一、前置工作：

1.准备好俩张图片素材

2.创建html和css外部样式表，并编写html代码

3.先去掉默认

4.设置我们div标签的属性

5.设置图片的宽高

6.设置div标签b的基本属性

二、动画制作

1.先定位图片二到图片一的位置

2.旋转图片二

3.鼠标放在图片上的效果

4.开始动画后，第一张图片向上移走

全部代码奉上：

---

先来看看成品图：

默认的状态：

 鼠标放在图片的动画过程：

 动画结束后的状态：

那我们开始操作

一、前置工作：

1.准备好俩张图片素材

2.创建html和css外部样式表，并编写html代码

 我们在head标签中使用link标签引入我们的css样式表

在body标签中，我们先创建个div标签，用id选择器命名为a，然后在里面先使用img标签插入我们的第一张图片，接着在img下面再建立一个div标签，命名为b，并在b中建立一个p标签，里面写上我们要呈现的字，这样我们的html中的内容编写完毕。我们在选择单个div标签时，就可以用#a或#b来编写内容。

效果图如下：

 接着我们开始设置我们的css。

3.先去掉默认

 *代表的是全局选择器，我们把所有的margin（外边距）和padding（内填充）设为0像素；margin就是块元素与其他元素的距离，padding就是我们的内容与border（边框）之间的距离。