[分享]css3如何做出飞入的效果

CSS3的animation动画属性可用于制作许多吸引人的动态效果，其中“飞入”效果也可以通过animation来实现。/先定义一个类，设定元素的初始位置和动画时间/ .flyin { : relat...

CSS3的animation动画属性可用于制作许多吸引人的动态效果，其中“飞入”效果也可以通过animation来实现。

/*先定义一个类，设定元素的初始位置和动画时间*/
.fly-in {
	position: relative;
	left: -50%; /*设置元素离左侧的距离为其自身宽度的一半*/
	animation: fly-in 1s ease-in-out forwards; /*动画名称、时间、缓动及播放结束是否保持结束状态*/
}
/*定义“飞入”动画的样式*/
@keyframes fly-in {
	from {
		left: -50%; /*起始位置，即页面左侧*/
	}
	to {
		left: 0; /*结束位置，即元素最终的位置*/
	}
}

上述代码中，我们定义了一个名为“fly-in”的类，将元素的位置设置在页面左侧，然后定义了一个“fly-in”动画，再将动画添加到类中。通过使用animation属性，我们可指定元素的动画时间、动画方式以及动画结束后元素的状态。

为了让“飞入”效果更为生动，可以将动画名添加到元素的属性中，例如：

<img src="image.jpg" alt="image" class="fly-in">

将“fly-in”动画名添加到元素的类名中，便可在页面中展示“飞入”效果。总之，通过CSS3的animation属性，我们可以轻松地制作出飞入的动态效果。