css+div实现转圈圈loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css+div实现转圈圈loading加载动画效果代码
代码标签: css div 转圈圈 loading 加载 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" class="loading"> <head> <meta charset="UTF-8"> <style> button, input, select, textarea { /* I want my default button style back */ font-size: 90%; } * { box-sizing: border-box; } body { } .loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0); transition: background-color .2s ease-out; } .loading-anim { position: relative; width: 200px; height: 200px; margin: auto; perspective: 800px; transform-style: preserve-3d; transform: translateZ(-100px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) scale(0.5); opacity: 0; transition: all .2s ease-out; } .loading-anim .circle { width: 100%; height: 100%; animation: spin 5s linear infinite; } .loading-anim .border { position: absolute; border-radius: 50%; border: 3px solid #e34981; } .loading-anim .out { top: 15%; left: 15%; width: 70%; height: 70%; border-left-color: transparent; border-right-color: transparent; animation: spin 2s linear reverse infinite; } .loading-anim .in { top: 18%; left: 18%; width: 64%; height: 64%; border-top-color: transparent; border-bottom-color: transparent; animation: spin 2s linear infinite; } .loading-anim .mid { top: 40%; left: 40%; width: 20%; height: 20%; border-left-color: transparent; border-right-color: transparent; animation: spin 1s linear infinite; } .loading .loading-anim { transform: translateZ(0) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1); opacity: 1; } .loading .loading-overlay { background: rgba(255, 255, 255, 0.5); } .dot { position: absolute; display: block; width: 20px; height: 20px; border-radius: 50%; background-color: #e34981; animation: jitter 5s ease-in-out infinite, fade-in-out 5s linear infinite; } .dot:nth-child(1) { top: 90px; left: 180px; animation-delay: 0s; } .dot:nth-child(2) { top: 135px; left: 168px; animation-delay: 0.41667s; } .dot:nth-child(3) { top: 168px; left: 135px; animation-delay: 0.8333.........完整代码请登录后点击上方下载按钮下载查看
网友评论0