css新增的特性与css3动画（快速上手）

css3新增的特性

1.选择器

   例如: :nth-child、:first-of-type、:last-of-type

2.边框与圆角

CSS3提供了更灵活的边框与圆角设置，如 borede-radius可以轻松地创建圆角效果

3.背景与渐变

CSS3引入了背景渐变功能，包括线性渐变和径向渐变，使背景设计更加生动。

4.过渡

transition属性允许元素在状态改变时平滑地过渡其属性值，如颜色、大小、位置等，提供简单的动画效果。

5.变换

transform属性可以对元素进行旋转、缩放、倾斜和平移等操作，增强了页面的交互性和视觉效果。

6.@media

@media 是 CSS3 媒体查询的一部分，它允许开发者根据设备的特定条件（如宽度、高度、方向等）来应用不同的 CSS 样式。这使得开发者能够创建响应式网站，即网站能够根据用户设备的不同（如桌面电脑、平板电脑、手机等）自动调整其布局和样式，以提供最佳的用户体验。
 例子:可以使用 @media 查询来确保一个元素在小屏幕设备上显示为一个块级元素，而在大屏幕设备上显示为一个行内元素。这可以通过编写类似下面的 CSS 代码来实现：

7.flex弹性盒布局

  flex 是 CSS3 引入的一个新的布局模式，称为弹性盒子布局，它
不需要使用浮动和定位等传统布局技术。

CSS3动画

CSS3的动画主要通过@keyframes规则和animation属性实现

• @keyframes规则

  这个规则用于创建动画。你可以定义关键帧和过渡细节来控制动画的执行。
  例如，你可以设置动画开始时（0%或from）和结束时（100%或to）的样式，以及在动画过程中的其他关键帧的样式。

• animation属性
  是所有动画属性的简写属性，用于将动画绑定到选择器。你可以指定动画的名称、动画的时长、动画的延迟、动画的迭代次数、动画的播放方向等。

     下面是一个点单的动画事例