css+svg实现太极八卦阴阳loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css+svg实现太极八卦阴阳loading加载动画效果代码
代码标签: css svg 太极 八卦 阴阳 loading 加载 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Oswald|Roboto); body { background-color: #85c1a0; height: 100vh; overflow: hidden; text-align: center; font-family: "Roboto", sans-serif; } .table { display: table; width: 100%; height: 100%; } .table-cell { position: absolute; left: 0; right: 0; top: 50%; margin-top: -235px; display: table-cell; vertical-align: middle; -moz-animation: rotate 5s infinite linear normal; -webkit-animation: rotate 5s infinite linear normal; animation: rotate 5s infinite linear normal; } #Path1, #Path2 { -moz-animation: Path 10s infinite ease-in-out; -webkit-animation: Path 10s infinite ease-in-out; animation: Path 10s infinite ease-in-out; } #Oval-3 { -moz-animation: rotate-oval-3 5s infinite linear normal; -webkit-animation: rotate-oval-3 5s infinite linear normal; animation: rotate-oval-3 5s infinite linear normal; } #Oval-4 { -moz-animation: rotate-oval-4 5s infinite linear normal; -webkit-animation: rotate-oval-4 5s infinite linear normal; animation: rotate-oval-4 5s infinite linear normal; } #Oval-3-2 { -moz-animation: rotate-oval-3-2 5s infinite linear normal; -webkit-animation: rotate-oval-3-2 5s infinite linear normal; animation: rotate-oval-3-2 5s infinite linear normal; } #Oval-4-2 { -moz-animation: rotate-oval-4-2 5s infinite linear normal; -webkit-animation: rotate-oval-4-2 5s infinite linear normal; animation: rotate-oval-4-2 5s infinite linear normal; } @keyframes rotate { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate-oval-3 { 20% { transform: translateX(-3%) translateY(-4%); } 60% { transform: translateX(-40%) translateY(-50%); } } @keyframes rotate-oval-4 { 20% { transform: translateX(3%) translateY(4%); } 60% { transform: translateX(40%) translateY(50%); } } @keyframes rotate-oval-3-2 { 20% { transform: translateX(-3%) translateY(-4%); } 60% { transform: translateX(130%) translateY(270%); } } @keyframes rotate-oval-4-2 { 20% { transform: translateX(3%) translateY(4%); } 60% { transform: translateX(-130%) translateY(-270%); } } @keyframes Path { 20% { transform: translateX(-9%) translateY(-4%); } 80% { transform: translateX(-19%) translateY(-5%); } } .rabbit { width: 50px; height: 50px; position: absolute; bottom: 20px; right: 20px; z-index: 3; fill: #fff; } </style> </head> <body > <div class="table"><div class="table-cell"> <svg width="470px" height="470px" viewBox="0 0 470 470" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1"> <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> <feGaussianBlur stdDeviation="25" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.30 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix> <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetInner1"></feOffset> <feGaussianBlur stdDeviation="25" in="shadowOffsetInner1" result="shadowBlurInner1"></feGaussianBlur> <feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite> <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0" in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"></feColorMatrix> <feMerge> <feMergeNode in="shadowMatrixOuter1"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> <feMergeNode in="shadowMatrixInner1"></feMergeNode> </feMerge> </filter> <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2"> <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> <feGaussianBlur stdDeviation="22.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix> <feMerge> <feMergeNode in="shadowMatrixOuter1"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-3"> <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> <feGaussianBlur stdDeviation="20" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix> <feMerge> <feMergeNode in="shadowMatrixOuter1"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4"> <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> <feGaussianBlur stdDeviation="25" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.30 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix> <feMerge> <feMergeNode in="shadowMatrixOuter1"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-5"> <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> <feGaussianBlur stdDeviati.........完整代码请登录后点击上方下载按钮下载查看
网友评论0