css实现彩色光晕光环转动loading加载动画效果代码

代码语言:html

所属分类:加载滚动

代码描述:css实现彩色光晕光环转动loading加载动画效果代码

代码标签: css 彩色 光晕 光环 转动 loading 加载 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body{
      margin:0;
      padding:0;
      display:flex;
      justify-content:center;
      align-items:center;
      height:100vh;
      background-color: #240229;
    }
    
    .loader {
      position:relative;
      width:100px;
      height:100px;
      border-radius:50%;
      background: linear-gradient(#14ffe9, #d64161, #feb236);
      animation: animate 0.5s linear infinite;
    }
    
    @keyframes animate 
    {
      0%{
        transform: rotate(0deg);
      }
      100%{
        transform: rotate(360deg);
      }
    }
    
    .loader-text {
        display: block;
        position: relative;
        text-align: center;
        margin-top: 0.5em;
        font-size: 1.5em;
        font-family: sans-serif;
        color: #14ffe9;
        text-shadow: 0.068em 0.068em #ffeb3b;
        animation: bounce 2.5s linear infinite;
        letter-spacing: 0.2em;
    }
    
    @keyframes bounce {
        0% {
            top: 0;
        }
        25% {
            top: 0.625em; 
        }
        50% {
            top: 0;
        }
        75% {
            top: 0.625em;
        .........完整代码请登录后点击上方下载按钮下载查看

网友评论0