CSS3页面加载过度是一种在页面加载时添加动画或效果的方式,让用户体验更加流畅和友好。html { height: 100%; } body { background: #121212; color:
CSS3页面加载过度是一种在页面加载时添加动画或效果的方式,让用户体验更加流畅和友好。
html { height: 100%; } body { background: #121212; color: #fff; font-size: 16px; font-family: "Arial", sans-serif; line-height: 1.5; height: 100%; position: relative; } .loader { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 9999; background: #121212; display: flex; justify-content: center; align-items: center; transition: opacity 0.5s ease; } .loader.fadeOut { opacity: 0; } .spinner { width: 50px; height: 50px; border: 6px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: spin 1s ease infinite; } @keyframes spin { to { transform: rotate(360deg); } }
以上是一个简单的加载过度效果实现的代码,通过CSS3的动画特性实现。我们可以看到,在页面加载时显示一个背景为黑色的遮罩,中央旋转的圆形表示页面正在加载。
此外,我们还可以添加其他的过度效果来提高用户体验,比如页面平滑滚动、图片逐渐显示等。但需要注意的是,过度效果应该尽量简单、清晰,一般不要过分炫酷,以免影响用户访问体验。
粉丝
0
关注
0
收藏
0