css内容渐入效果实现

2024-09-06 03:39:17

.fade-in-section {

  opacity: 0;

  transform: translateY(20vh);

  visibility: hidden;

  transition: opacity 1200ms ease-out, transform 600ms ease-out,

  visibility 1200ms ease-out;

  will-change: opacity, transform, visibility; // 动画性能优化，页面不是特别复杂情况下不要使用，详见：这里
　　

}

.fade-in-section.is-visible {

  opacity: 1;

  transform: none;

  visibility: visible;

}

demo效果：

如果你有经常访问苹果官网，你会发现其中就有类似的特效：

在展示内容的官网页面，可以结合此特效会带来比较优雅的展示提示

最新文章

热门文章