【css】纯CSS的好看跳舞镜像发光加载动画

最新推荐文章于 2024-07-23 14:13:22 发布

KatyLight

最新推荐文章于 2024-07-23 14:13:22 发布

阅读量211

点赞数

分类专栏：样式文章标签： css 动画 css3

本文链接：https://blog.csdn.net/qq_33014695/article/details/125087841

版权

样式专栏收录该内容

32 篇文章 0 订阅

订阅专栏

经典特效

加上ｔｅｘｔｓｈａｄｏｗ模拟发光字体后

源代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body {
      background-color: black;
    }

    span {
      animation: dance .3s infinite alternate;
      position: relative;
      display: inline-block;
      counter-increment: section;
      font-size: 40px;
      color: white;
      line-height: 60px;
      text-shadow: 0 0 10px   white;

    }

    div {
      -webkit-box-reflect: below 0 linear-gradient(#00000000, #00000066);;

      padding-top: 40px;
      overflow: visible;
      text-align: center;
      background-image: radial-gradient(#FFFFFF99 10%, #FFFFFF10 60%, transparent 70%);
      background-size: 400px 120px;
      background-repeat: no-repeat;
      background-position: center 60px;
      border-bottom: 1px solid transparent;
      border-image: linear-gradient(90deg, #00000000, #FFFFFF55, #00000000) 1;
width: 800px;
      margin: 160px auto;
    }

    @keyframes dance {
      0% {
        transform: translateY(0) scaleY(80%);
        color: #FFFFFFFF;
      }
      100% {
        transform: translateY(-40px) scaleY(120%);
        color: #FFFFFF55;
      }
    }

    body {
      counter-reset: section;
    }

    span:nth-child(6n+1) {
      animation-delay: .1s;
    }

    span:nth-child(6n+2) {
      animation-delay: .2s;
    }

    span:nth-child(6n+3) {
      animation-delay: .3s;
    }

    span:nth-child(6n+4) {
      animation-delay: .4s;
    }

    span:nth-child(6n+5) {
      animation-delay: .5s;
    }

    span:nth-child(6n) {
      animation-delay: .6s;
    }
  </style>
</head>
<body>
<div>
  <span>L</span>
  <span>o</span>
  <span>a</span>
  <span>d</span>
  <span>i</span>
  <span>n</span>
  <span>g</span>
  <span>.</span>
  <span>.</span>
  <span>.</span>
</div>
<div>
  <span>加</span>
  <span>载</span>
  <span>中</span>
  <span>，</span>
  <span>请</span>
  <span>稍</span>
  <span>后</span>
  <span>.</span>
  <span>.</span>
  <span>.</span>
</div>
</body>
</html>