html动画效果转换为视频,CSS3制作各种平滑过渡的动画效果

通过CSS3的新特性，我们可以不使用javascript或Flash就可以将元素从一个状态过渡到另一个状态。它允许元素在指定的时间里改变它们的值，使各种可以动画的属性执行动画效果。CSS3的动画样式和效果使你可以制作出各种你想要的炫酷效果。

在这篇文章中，我们将介绍各种可以在CSS3中使用的过渡和动画效果。

形状变化动画

对于CSS3元素形状变化的介绍，我们将使用一个圆角矩形图片变化为一个圆形图片为例子，我们将为它添加一个transition效果all 1s ease。

这个属性的意思是当我们用鼠标滑过图片的时候，它将在1秒钟的时间内将图片转换为圆形的形状。整个变形动画会修个图片的border-radius属性，使它从圆角矩形转换为圆形。

这个demo的HTML代码使用一个

来包裹一个图片元素，在

上使用class morph来制作变形动画。

下面来添加一些基本的CSS样式。图片的宽度和高度都设置为200px，并给它一个10像素的边框，然后设置15像素的圆角。另外，在图片的:hover状态下设置鼠标为小手的形状。

.img {

width: 200px;

height: 200px;

border: 10px solid #fff;

-webkit-border-radius: 15px;

border-radius: 15px;

overflow: hidden;

}

.img:hover {

cursor: pointer;

}

现在要制作图形的变形效果，我们将要为这个动画效果添加CSS3 的transition属性。使用这个属性时要为各个浏览器指定厂商前缀：-webkit, -moz, -ms, -o。它的值设置为all 1s ease。transition属性会将元素从正常状态在1秒钟时间内转换到鼠标滑过时的状态。

我们在往下写代码之前，先来看看transition属性的语法：

t