纯css模仿win8 loading加载效果动画代码
代码语言:html
所属分类:加载滚动
代码描述:纯css模仿win8 loading加载效果动画代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * {margin: 0; padding: 0;} body { background: #3498db; } .loader { top: 50%; } /* Demo specific styles end */ /* Loader with three blocks */ .loader, .loader:before, .loader:after { display: inline-block; width: 100%; height: 10px; position: absolute; z-index: 100000; animation: loading 4s cubic-bezier(.1,.85,.9,.15) infinite, loading-opacity 2s ease-in-out infinite alternate; background: linear-gradient(to right, white 0px, white 10px, transparent 10px) no-repeat 0px 0px / 10px 10px; content: ' '; } .loader { animation-delay: .1s; } .loader:after { animation-delay: .2s; } @keyframes loading-opacity { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; } } @keyframes loading { 0% { background-position: -50% 0px; } 100% { background-position: 150% 0px.........完整代码请登录后点击上方下载按钮下载查看
网友评论0