css3新特性杂谈-那些在工作中常用到的一些新特性

css3，这个相信大家不陌生了，它是一个非常有趣，神奇的东西！有了css3，js都可以少写很多！

我之前也写过关于css3的文章，也封装过css3的一些小动画。个人觉得css3不难，但是很难用得好，用得顺手。

最近我也在过一遍css3的一些新特性（不是全部，是我在工作上常用的，或者觉得有意思的），写下这篇文章，也是想给自己做个总结，也希望对大家有所帮助。

一、css3 transition

transition属性允许你设置元素从一个状态过渡到另一个状态的动画效果。

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 1s ease-in-out;
}

div:hover {
  width: 200px;
  height: 200px;
  background-color: blue;
}

这段代码中，我们设置了元素在鼠标悬停时从宽度100px、高度100px、背景色红色的状态过渡到宽度200px、高度200px、背景色蓝色的状态，过渡时间为1秒，过渡效果为ease-in-out。

二、css3 animation

animation属性允许你创建复杂的动画效果。

@keyframes example {
  from {
    left: 0;
  }

  to {
    left: 200px;
  }
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: example 1s infinite alternate;
}

这段代码中，我们定义了一个名为example的动画，该动画将元素从左侧移动到右侧，然后再从右侧移动到左侧，如此循环，动画时间为1秒，动画效果为alternate。

三、css3 transform

transform属性允许你对元素进行旋转、缩放、平移等操作。

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg);
}

这段代码中，我们对元素进行了旋转45度的操作。

四、css3 filter

filter属性允许你对元素应用各种滤镜效果。

div {
  width: 100px;
  height: 100px;
  background-color: red;
  filter: blur(5px);
}

这段代码中，我们对元素应用了模糊滤镜，模糊半径为5px。

五、css3 3d transform

3d transform属性允许你对元素进行3d变换。

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotateX(45deg) rotateY(45deg);
}

这段代码中，我们对元素进行了绕x轴旋转45度、绕y轴旋转45度的操作。

以上便是css3的一些新特性介绍，希望对大家有所帮助。