css实现半环转动loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css实现半环转动loading加载动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --background: #37ab2f; --foreground: white; } .loader { --size: 6em; display: inline-block; width: var(--size); } .loader svg { display: block; transform: rotateZ(0deg); } .loader circle { stroke: currentcolor; stroke-width: 5px; r: 9.5px; stroke-dasharray: 0.01px, 59.6802604165px; stroke-dashoffset: 0; -webkit-animation: 1.8s cubic-bezier(0.3, 0.8, 0.1, 1) infinite go; animation: 1.8s cubic-bezier(0.3, 0.8, 0.1, 1) infinite go; } @-webkit-keyframes go { 0% { stroke-dasharray: 0.01px, 59.6802604165px; stroke-dashoffset: 0; } 25% { stroke-dasharray: 29.8451302083px, 29.8451302083px; stroke-dashoffset: 0; } 50% { stroke-dasharray: 0.01px, 59.6802604165px; stroke-dashoffset: -29.8451302083px; } 75% { stroke-dasharray: 29.8451302083px, 29.8451302083px; stroke-dashoffset: -29.8451302083px; } 100% { stroke-dasharray: 0.01px, 59.6802604165px; stroke-dashoffset: -59.6902604165px; } } @keyframes go { 0% { stroke-dasharray: 0.01px, 59.6802604165px; stroke-dashoffset: 0; } 25% { s.........完整代码请登录后点击上方下载按钮下载查看
网友评论0