CSS淡入淡出/缓解页面加载效果

CSS fade-in / ease effect on page load

本文关键字：加载 淡入 淡出 CSS      更新时间：2023-09-26

我正在寻找在页面加载时简化元素的最佳方式。

我真的很喜欢它的样子http://alpha.musicinfo.fi/当你进行搜索时，内容有点滑入/淡出。

我想知道他们是如何做到这一点的，因为它在浏览器和移动设备上运行得非常流畅。

谢谢！

对于最简单的动画，您需要使用CSS3转换，它在除opera mobile之外的所有设备上都支持。

transition: top 0.2s ease-in, opacity 0.2s ease-in
-webkit-transition: top 0.2s ease-in, opacity 0.2s ease-in
opacity: 0.0;
position: relative;
top: 20px;

然后使用javascript或jQuery，您可以在加载时设置新状态。

$('#element').css({opacity: 1.0, top: '0px'})

但为了获得最大的灵活性和控制，您需要使用jQuery的.animate()函数。然后你可以做一些类似 $('#element').animate({ opacity: '1.0', top: '0px' }, 200) 的事情

将默认CSS设置为opacity: 0; top: 20px; position: relative;

CSS3动画可能是实现这一点的最简单方法，但它并没有得到很好的支持。我认为您最现实的选择是使用jQuery的.fadeIn()函数，以平衡易实现性和浏览器支持。

下面是使用jQuery的addClass函数的另一个方法。

这个例子有点难看，但你明白了。也可以使用CSS3转换，如transition等。

还要添加多个要更改的类以折叠长方体。这只是另一种方法，也许不是最好的，但仍然是另一种方式。

小提琴在这儿：http://jsfiddle.net/GrsXx/

相关文章：