3D氛围灯效果

二等兵降空投

已于 2024-08-08 16:32:24 修改

阅读量925

点赞数 17

文章标签： 3d

于 2024-08-08 16:30:09 首次发布

本文链接：https://blog.csdn.net/Huang595959/article/details/141030360

版权

效果图:

<div class="container">
    <p class="a">Atmosphere lights</p>
</div>

css部分

<style scoped>
  html,
  body {
    width: 100%;
    height: 100%;
    display: flex;
    font-weight: bold;
    background: #000;
  }

  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: auto;
    transform: rotateX(25deg) rotateY(25deg);
  }

  p {
    text-align: center;
    display: block;
    font-size: 26vh;
    letter-spacing: 50px;
  }

  .a {
    color: #88e;
    text-shadow: 0 0 0.4em rgba(200, 200, 255, 0.3), 0.04em 0.04em 0 #112,
      0.045em 0.045em 0 #88e, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #66c,
      0.14em 0.14em 0 #112, 0.145em 0.145em 0 #44a;
    animation: pulseb 300ms ease infinite alternate;
  }

  @keyframes pulseb {
    0% {
        text-shadow: 0 0 0.3em rgba(255, 100, 200, 0.3), 0.04em 0.04em 0 #112,
            0.045em 0.045em 0 #f99, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #b66,
            0.14em 0.14em 0 #112, 0.145em 0.145em 0 #faa;
    }
    50% {
        text-shadow: 0 0 0.3em rgba(255, 100, 200, 0.3), 0.04em 0.04em 0 #112,
            0.045em 0.045em 0 #f99, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #faa,
            0.14em 0.14em 0 #112, 0.145em 0.145em 0 #a44;
    }
    75% {
        text-shadow: 0 0 0.3em rgba(255, 100, 200, 0.3), 0.04em 0.04em 0 #112,
            0.045em 0.045em 0 #faa, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #b66,
            0.14em 0.14em 0 #112, 0.145em 0.145em 0 #a44;
    }
    100% {
        text-shadow: 0 0 0.3em rgba(255, 100, 200, 0.3), 0.04em 0.04em 0 #112,
            0.045em 0.045em 0 #f99, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #b66,
            0.14em 0.14em 0 #112, 0.145em 0.145em 0 #a44;
    }
}
</style>