css+div实现圆锥角度渐变旋转器loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css+div实现圆锥角度渐变旋转器loading加载动画效果代码
代码标签: css div 圆锥 角度 渐变 旋转器 loading 加载 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .spinner{ opacity: 0; transition: opacity 0.2s ease-in-out; margin: 0.5rem; vertical-align: middle; } .spinner--play{ opacity: 1; } .spinner-div{ width: 100%; height: 100%; border-radius: 100%; background: conic-gradient(white, transparent); animation: loader-rotate 2s linear infinite; } .spinner.spinner--stop .spinner-div{ animation: none; } @keyframes loader-rotate{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } /* Just for display */ html, body{ background: black; width: 100%; height: 100%; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0