css模拟Android Nougat升级更新加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css模拟Android Nougat升级更新加载动画效果代码
代码标签: css Android Nougat 升级 更新 加载 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .circles { height: 55vmin; width: 55vmin; position: absolute; margin: 0 auto; top: 50%; left: 50%; transform: translate3D(-50%, -50%, 0); } .circle { box-sizing: border-box; position: absolute; width: 100%; height: 100%; border: 2.5vmin solid transparent; border-radius: 115% 140% 145% 110%/125% 140% 110% 125%; mix-blend-mode: screen; } .circle:nth-child(1) { border-color: #DB4437; transform-origin: 50% 50%; -webkit-animation: spin1 5.5s linear infinite; animation: spin1 5.5s linear infinite; } .circle:nth-child(2) { border-color: #F4B400; transform-origin: 50% 50%; -webkit-animation: spin2 5.5s linear infinite; animation: spin2 5.5s linear infinite; } .circle:nth-child(3) { border-color: #4285F4; transform-origin: 50% 50%; -webkit-animation: spin3 5.5s linear infinite; animation: spin3 5.5s linear infinite; } .circle:nth-child(4) { border-color: #0F9D58; transform-origin: 50% 50%; -webkit-animation: spin4 5.5s linear infinite; animation: spin4 5.5s linear infinite; } @-webkit-keyframes spin1 { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @keyframes spin1 { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @-webkit-keyframes spin2 { 0% { transform: rotate(72deg); } 100% { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0