css实现圈圈转动loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css实现圈圈转动loading加载动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <title>BFW NEW PAGE</title> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tailwind.min.css"> <style> body{ background: black; } ^ { padding: 0; margin: 0; box-sizing: border-box; } button { font-family: inherit; } /* The loader container */ .loader { width: 200px; height: 200px; perspective: 200px; } /* The dot */ .dot { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin-top: -60px; margin-left: -60px; border-radius: 100px; border: 40px outset #1e3f57; transform-origin: 50% 50%; transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); background-color: transparent; animation: dot1 1000ms cubic-bezier(.49,.06,.43,.85) infinite; } .dot:nth-child(2) { width: 140px; height: 140px; margin-top: -70px; margin-left: -70px; border-width: 30px; border-color: #447891; animation-name: dot2; animation-delay: 75ms; box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1); transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); } .dot:nth-child(3) { width: 160px; height: 160px; margin-top: -80px; margin-left: -80px; border-width: 20px; border-color: #6bb2cd; animation-name: dot3; animation-delay: 150ms; box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1); transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); } @keyframes dot1 { 0% { border-color: #1e3f57; transform: rotateX(24deg) rotateY(.........完整代码请登录后点击上方下载按钮下载查看
网友评论0