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