前言

写着玩系列，HTML页面练习，如何写一个全屏的波浪式渐变色动态背景以及一个简单的立体字体demo。

代码

<template>
  <div class="container">
    <div>
      <h1 id="text3d-en">test</h1>
      <h1 id="text3d-ch">立体字体</h1>
    </div>
  </div>
</template>

<script>

</script>

<style>
  body {
    background: linear-gradient(-45deg, #99ccff, #006699, #003366, #000);//渐变色背景
    background-size: 400% 400%;
    -webkit-animation: gradient 15s ease infinite;
    animation: gradient 15s ease infinite;
  }

  @-webkit-keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  @keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
</style>
<style>
  h1 {
    width: 100%;
    margin: 0 auto 0 auto;
    font-family: 'Lato', sans-serif;
    line-height: 10px;
    font-size: 2.0rem;
    padding: 50px 50px;
    text-align: center;
    text-transform: uppercase;
    text-rendering: optimizeLegibility;
  }

  h1::before {
    content:"";
    width: 100%;
    position: absolute;
    top: -200px;
    left: 10px;
    transform: rotate(55deg);
  }

  #text3d-ch {
    color: #70869d;
    letter-spacing: .15em;
    text-shadow:
      -1px -1px 1px #efede3,
      0px 1px 0 #2e2e2e,
      0px 2px 0 #2c2c2c,
      0px 3px 0 #2a2a2a,
      0px 4px 0 #282828;
  }
  #text3d-en {
    color: #70869d;
    letter-spacing: .15em;
  }
  .v-btn :hover{
    color: #2983f3;
  }
</style>