四分之一圆循环oading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:四分之一圆循环oading加载动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --accent-color: 228, 20, 255; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; background: #222; color: rgb(var(--accent-color)); } [loading-icon] { position: absolute; top: 50%; left: 50%; width: 0px; height: 0px; transform: translate(-50%, -50%); } [loading-icon] [top], [loading-icon] [right], [loading-icon] [bottom], [loading-icon] [left] { position: absolute; width: 100%; height: 100%; border-radius: 50%; opacity: 0; border: 8px solid rgba(var(--accent-color), 0); } [loading-icon] [top] { border-top-color: rgba(var(--accent-color), 1); animation: fade 1s 0s infinite; } [loading-icon] [right] { border.........完整代码请登录后点击上方下载按钮下载查看
网友评论0