关于css3: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 属性
  是所有动画属性的简写属性，用于将动画绑定到选择器。你能够指定动画的名称、动画的时长、动画的提早、动画的迭代次数、动画的播放方向等。

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