qinyi素材网
当前位置: 首页 > WEB教程 > 使用CSS制作的五种文字特效

使用CSS制作的五种文字特效

  时间: 2021-11-29   阅读:1.58k
简要教程

使用CSS最少代码制作剪辑背景图像、渐变或视频效果五种文字特效。

使用方法

先引入下面的公共样式代码

* {
  box-sizing: border-box;
}

body {
  background: black;
  font-family: "Fredoka One", Helvetica, Arial;
  color: white;
}

section {
  margin: 100px 0;
}

h1 {
  font-size: 140px;
  text-align: center;
  letter-spacing: 1px;
}

CSS渐变文本


css样式

        .gradients h1 {
            background: linear-gradient(30deg, #9ed8db 40%, #007b82 70%);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }

HTML代码

<section class="gradients">
    <h1>Gradients</h1>
</section>

CSS 动画渐变文本


css样式

.animated h1 {
  background: radial-gradient(circle, #80ffc1 0%, #ff6161 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: animatedGradient 2s infinite ease;
  animation-direction: alternate;
}

@keyframes animatedGradient {
  from {
    background-size: 100%;
  }

  to {
    background-size: 250%;
  }
}

HTML代码

<section class="animated">
    <h1>Animated</h1>
</section>

CSS 图像背景文本


css样式

.images {
    background: url("https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80")
    no-repeat center center;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

HTML代码

<section class="images">
    <h1>Images</h1>
</section>

CSS 视频背景文本


css样式

.video-container {
  position: relative;
}

.video-container video {
  margin: auto;
  display: block;
  clip-path: url(#videoText);
  width: 640px;
}

.video-container svg {
  width: 0;
  height: 0;
  position: absolute;
}

HTML代码

    <section>
      <div class="video-container">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="74"
          height="30"
          viewBox="0 0 74 30"
        >
          <clipPath
            id="videoText"
            clipPathUnits="objectBoundingBox"
            transform="scale(0.0015625, 0.002777777777778)"
          >
            <path
              d="M196.62 116.04C203.7 119.52 207.24 123.36 207.24 127.56C207.24 129.48 206.34 132.36 204.54 136.2L154.86 237C153.54 239.64 151.5 241.8 148.74 243.48C146.1 245.04 143.34 245.82 140.46 245.82H138.66C135.66 245.82 132.78 245.04 130.02 243.48C127.38 241.8 125.4 239.64 124.08 237L74.4 136.2C72.6 132.36 71.7 129.48 71.7 127.56C71.7 123.36 75.24 119.52 82.32 116.04C86.28 114 89.28 112.98 91.32 112.98C93.48 112.98 95.1 113.22 96.18 113.7C97.26 114.18 98.28 115.02 99.24 116.22C100.32 117.66 101.28 119.28 102.12 121.08C103.08 122.76 105.42 127.74 109.14 136.02C112.86 144.18 116.82 152.88 121.02 162.12C125.34 171.36 129.36 180.12 133.08 188.4C136.92 196.56 139.08 201.12 139.56 202.08L175.56 123.24C176.52 120.96 177.36 119.16 178.08 117.84C180.24 114.6 182.88 112.98 186 112.98C189.12 112.98 192.66 114 196.62 116.04ZM212.606 166.98C212.606 164.22 212.666 162.18 212.786 160.86C213.026 159.42 213.566 157.8 214.406 156C216.086 152.88 220.766 151.32 228.446 151.32C234.206 151.32 238.286 152.34 240.686 154.38C242.726 156.06 243.806 158.64 243.926 162.12C244.046 163.32 244.106 165.06 244.106 167.34V230.34C244.106 233.1 243.986 235.2 243.746 236.64C243.626 237.96 243.086 239.52 242.126 241.32C240.566 244.44 235.946 246 228.266 246C220.706 246 216.086 244.38 214.406 241.14C213.566 239.34 213.026 237.78 212.786 236.46C212.666 235.14 212.606 233.04 212.606 230.16V166.98ZM242.126 133.68C241.286 135.36 239.726 136.56 237.446 137.28C235.166 138 232.106 138.36 228.266 138.36C224.546 138.36 221.546 138 219.266 137.28C216.986 136.56 215.366 135.3 214.406 133.5C213.566 131.7 213.026 130.14 212.786 128.82C212.666 127.38 212.606 125.28 212.606 122.52C212.606 119.76 212.666 117.72 212.786 116.4C213.026 114.96 213.566 113.4 214.406 111.72C216.086 108.48 220.766 106.86 228.446 106.86C236.006 106.86 240.566 108.48 242.126 111.72C243.086 113.52 243.626 115.14 243.746 116.58C243.986 117.9 244.106 119.94 244.106 122.7C244.106 125.46 243.986 127.56 243.746 129C243.626 130.32 243.086 131.88 242.126 133.68ZM322.025 111.72C322.985 109.92 324.605 108.66 326.885 107.94C329.165 107.22 332.165 106.86 335.885 106.86C339.725 106.86 342.785 107.22 345.065 107.94C347.345 108.66 348.905 109.92 349.745 111.72C350.705 113.52 351.245 115.14 351.365 116.58C351.605 117.9 351.725 119.94 351.725 122.7V230.16C351.725 232.92 351.605 235.02 351.365 236.46C351.245 237.78 350.705 239.28 349.745 240.96C347.945 244.2 342.845 245.82 334.445 245.82C326.165 245.82 321.545 242.88 320.585 237C315.545 242.76 308.525 245.64 299.525 245.64C288.725 245.64 278.885 240.96 270.005 231.6C261.125 222.12 256.685 211.14 256.685 198.66C256.685 186.06 261.125 175.02 270.005 165.54C279.005 156.06 288.845 151.32 299.525 151.32C308.405 151.32 315.305 154.32 320.225 160.32V122.52C320.225 119.76 320.285 117.72 320.405 116.4C320.645 114.96 321.185 113.4 322.025 111.72ZM292.865 209.46C295.985 212.7 299.765 214.32 304.205 214.32C308.645 214.32 312.305 212.7 315.185 209.46C318.185 206.22 319.685 202.68 319.685 198.84C319.685 194.88 318.245 191.22 315.365 187.86C312.605 184.5 308.825 182.82 304.025 182.82C299.225 182.82 295.385 184.5 292.505 187.86C289.625 191.1 288.185 194.7 288.185 198.66C288.185 202.62 289.745 206.22 292.865 209.46ZM457.503 187.32C457.503 194.64 455.643 200.1 451.923 203.7C448.323 207.18 444.303 208.92 439.863 208.92H397.203C397.203 212.28 399.183 215.1 403.143 217.38C407.103 219.66 411.063 220.8 415.023 220.8C421.983 220.8 427.443 220.08 431.403 218.64L433.383 217.92C436.263 216.6 438.663 215.94 440.583 215.94C444.423 215.94 447.723 218.64 450.483 224.04C452.043 227.28 452.823 230.04 452.823 232.32C452.823 243 440.043 248.34 414.483 248.34C405.603 248.34 397.683 246.84 390.723 243.84C383.883 240.72 378.543 236.64 374.703 231.6C367.143 221.88 363.363 211.02 363.363 199.02C363.363 183.9 368.223 171.84 377.943 162.84C387.783 153.72 400.023 149.16 414.663 149.16C431.343 149.16 443.583 155.04 451.383 166.8C455.463 173.04 457.503 179.88 457.503 187.32ZM419.523 192.54C424.083 192.54 426.363 190.62 426.363 186.78C426.363 184.02 425.283 181.8 423.123 180.12C421.083 178.44 418.083 177.6 414.123 177.6C410.283 177.6 406.443 179.22 402.603 182.46C398.763 185.58 396.843 188.94 396.843 192.54H419.523ZM466.547 198.66C466.547 184.26 471.587 172.38 481.667 163.02C491.747 153.66 503.267 148.98 516.227 148.98C529.187 148.98 540.647 153.66 550.607 163.02C560.567 172.26 565.547 184.08 565.547 198.48C565.547 208.44 562.967 217.32 557.807 225.12C552.647 232.8 546.347 238.5 538.907 242.22C531.587 245.82 523.967 247.62 516.047 247.62C508.127 247.62 500.447 245.7 493.007 241.86C485.567 237.9 479.267 232.14 474.107 224.58C469.067 216.9 466.547 208.26 466.547 198.66ZM504.167 211.62C508.007 214.5 511.907 215.94 515.867 215.94C519.827 215.94 523.787 214.44 527.747 211.44C531.707 208.44 533.687 204 533.687 198.12C533.687 192.24 531.827 187.86 528.107 184.98C524.387 182.1 520.367 180.66 516.047 180.66C511.727 180.66 507.707 182.16 503.987 185.16C500.267 188.16 498.407 192.6 498.407 198.48C498.407 204.24 500.327 208.62 504.167 211.62Z"
            />
          </clipPath>
        </svg>
        <video loop autoplay muted playsinline>
          <source
            src="https://res.cloudinary.com/dtpseup2f/video/upload/v1601751219/letsbuildui/2020-10-04-text/video_a3juyc.mp4"
            type="video/mp4"
          />
        </video>
      </div>
    </section>

CSS 分色文本


css样式

.split-text-container {
  position: relative;
}

.split-text-container h1 {
  color: white;
}

.split-text-container h1::before {
  content: attr(data-text);
  clip-path: polygon(0px 105%, 93% 0%, 100% 100%);
  margin: 0;
  color: #ff6161;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none; /* Make text selectable */
}

HTML代码

<section>
    <div class="split-text-container">
        <h1 data-text="Split Colors">Split Colors</h1>
    </div>
</section>
上一篇: 下一篇: