google谷歌点加载loading效果
代码语言:html
所属分类:加载滚动
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { font-family: "Google Sans", sans-serif; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; } h1 { margin-bottom: 50px; text-align: center; letter-spacing: 0px; font-size: 5em; font-weight: 500; } h1 span { display: inline-block; } h1 span:nth-child(1) { color: #4285f4; } h1 span:nth-child(2) { color: #db4437; } h1 span:nth-child(3) { color: #f4b400; } h1 span:nth-child(4) { color: #4285f4; } h1 span:nth-child(5) { color: #0f9d58; } h1 span:nth-child(6) { color: #db4437; -webkit-transform: rotate(-15deg); transform: rotate(-15deg); display: inline-block; } .google-dots { position: relative; -webkit-transform: translateX(-35px); transform: translateX(-35px); } .google-dots span { position: absolute; height: 10px; width: 10px; border-radius: 50%; will-change: transform; } .google-dots span.blue { background: #4285f4; -webkit-transform: translateX(0); transform: translateX(0); } .google-dots span.red { background: #db4437; -webkit-transform: translateX(20px); transform: translateX(20px); } .google-dots span.yellow { background: #f4b400; -webkit-transform: translateX(40px); transform: translateX(40px); } .google-dots span.green { background: #0f9d58; -webkit-transform: translateX(60px); transform: translateX(60px); } .google-dots.animate span.blue { -webkit-animation: move-1-2 0.5s 0s forwards, move-1-3 0.5s 0.5s forwards, move-1-4 0.5s 1.5s forwards, move-1-1 1.5s 3s forwards; animation: move-1-2 0.5s 0s forwards, move-1-3 0.5s 0.5s forwards, move-1-4 0.5s 1.5s forwards, move-1-1 1.5s 3s forwards; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } .google-dots.animate span.red { -webkit-animation: move-2-1 0.5s 0s forwards, move-1-2 0.5s 1s forwards, move-1-3 0.5s 2s forwards, move-1-4 0.5s 3.2s forwards, move-2-2 1s 4.5s forwards; animation: move-2-1 0.5s 0s forwards, move-1-2 0.5s 1s forwards, move-1-3 0.5s 2s forwards, move-1-4 0.5s 3.2s forwards, move-2-2 1s 4.5s forwards; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } .google-dots.animate span.yellow { -webkit-animation: move-3-2 0.5s 0.5s forwards, move-2-1 0.5s 1s forwards, move-1-2 0.5s 2.5s forwards, move-1-3 0.5s 3.5s forwards, move-1-4 0.5s 4.5s forwards, move-4-3 0.5s 5.5s forwards; animation: move-3-2 0.5s 0.5s forwards, move-2-1 0.5s 1s forwards, move-1-2 0.5s 2.5s forwards, move-1-3 0.5s 3.5s forwards, move-1-4 0.5s 4.5s forwards, move-4-3 0.5s 5.5s forwards; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } .google-dots.animate span.green { -webkit-animation: move-4-3 0.5s 1.5s forwards, move-3-2 0.5s 2s forwards, move-2-1 0.5s 2.5s forwards, move-1-2 0.5s 3.75s forwards, move-1-3 0.5s 4.85s forwards, move-1-4 0.5s 5.5s forwards; animation: move-4-3 0.5s 1.5s forwards, move-3-2 0.5s 2s forwards, move-2-1 0.5s 2.5s forwards, move-1-2 0.5s 3.75s forwards, move-1-3 0.5s 4.85s forwards, move-1-4 0.5s 5.5s forwards; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } @-webkit-keyframes move-1-2 { 0% { -webkit-transform-origin: 15px center; transform-origin: 15px center; -webkit-transform: translateX(0px); transform: translateX(0px); } 100% { -webkit-transform-origin: 15px center; transform-origin: 15px center; -webkit-transform: rotate(180deg); transform: rotate(180deg); } } @keyframes move-1-2 { 0% { -webkit-transform-origin: 15px center; transform-origin: 15px center; -webkit-transform: translateX(0px); transform: translateX(0px); } 100% { -webkit-transform-origin: 15px center; transform-origin: 15px center; -webkit-transform: rotate(180deg); transform: rotate(180deg); } } @-webkit-keyframes move-1-3 { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translateX(20px); transform: translateX(20px); } 1% { -webkit-transform-origin: 15px center; transform-origin: 15px center; } 100% { -webkit-transform-origin: 15px center; transform-origin: 15px center; -webkit-transform: translateX(20px) rotate(180deg); transform: translateX(20px) rotate(180deg); } } @keyframes move-1-3 { 0%.........完整代码请登录后点击上方下载按钮下载查看
网友评论0