CSS中弹出一个缓存圈是网页设计中常用的一种效果,可以让用户知道网页在加载中,同时也增加了用户体验。下面是如何在CSS中实现这种效果。.loading { position: fixed; top:
CSS中弹出一个缓存圈是网页设计中常用的一种效果,可以让用户知道网页在加载中,同时也增加了用户体验。下面是如何在CSS中实现这种效果。
.loading { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; } .loading:before, .loading:after { content: ""; position: absolute; top: 0; left: 50%; width: 15px; height: 15px; border-radius: 50%; background: #333; animation: load 2s linear infinite; transform: translate(-50%, -50%); } .loading:before { animation-delay: 0s; } .loading:after { animation-delay: 1s; } @keyframes load { 0% { transform: translate(-50%, -50%) scale(0); } 50% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(0); opacity: 0; } }
代码中首先创建一个类名为loading的div,用于包含缓存圈。然后在这个div中,使用:before和:after伪元素分别创建两个圆,分别为圆圈的左右两侧。接着,使用动画animation来实现圆圈的缓存效果,以及固定定位position、居中显示transform等样式,最终实现了一个简单而优雅的弹出缓存圈的效果。
粉丝
0
关注
0
收藏
0