The fantastic interweaving of text, light and shadow: Use CSS to create cool dynamic text outline effects!

Shhh, keep your voice down, I have a secret to tell you! Don’t be fooled by the rhetoric of those special effects vendors. The special effects they talk about are actually something we can do ourselves! Today, I’ll reveal a stunning CSS text outline effect that will give your pages a brand new look without spending a penny! Come and learn with me how to use magical CSS techniques to create your own cool special effects that will put those vendors to shame!

Okay~ Without further ado, let’s start with the final renderings.

Can you believe it? A certain website actually dared to charge me 8 oceans for this effect. I was so angry that I just started coding by hand.

Analysis process

HTML structure: We need a container element to contain the text and background animation. You can use an element as a container, containing an element inside to display text. <div> <h1>
CSS style:
- For container elements we set and to ensure that the background animation is only displayed within the scope of the container. .text-container ,position: relative;overflow: hidden;
- For text, we set and to control the style of the text, and set the text color to transparent . .text-mask ,font-sizefont-weightcolor: transparent;
- Use background-imagethe property to set the background animation to the background. .text-container
- Use the text outline as a mask through background-clipthe attribute so that the background animation is only displayed within the text outline. At the same time, text-fill-colorset the actual color of the text to transparent through the attribute to prevent the text content from being displayed on the background.
- You can adjust the background-sizeand background-repeatproperties to control how the background animation is displayed.
Replace animation: Replace it with your own GIF animation path and make sure the animation file is referenced correctly. your-gif-animation.gif

HTML

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="text-container">
    <h1 class="text-mask">AMAZING</h1>
  </div>
</body>

</html>

CSS

    /* 这个是为了让文字居中显示 */
    body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #000;
    }

    .text-container {
      position: relative;
      overflow: hidden;
    }

    .text-mask {
      font-size: 150px;
      /* 调整字体大小 */
      font-weight: bold;
      /* 字体粗细 */
      background-image: url(your-gif-animation.gif);
      /* 替换为你的GIF动图路径 */
      background-size: cover;
      background-repeat: no-repeat;
      color: transparent;
      /* 文字颜色透明 */
      -webkit-background-clip: text;
      /* Safari/Chrome浏览器支持 */
      background-clip: text;
      /* 裁剪模式为文字 */
      -webkit-text-fill-color: transparent;
      /* 隐藏文字实际颜色 */
      text-fill-color: transparent;
      /* 隐藏文字实际颜色 */
    }

At this point, this cool effect has been achieved. If you gain something, it means that you have spent 8 oceans in vain today. O(∩_∩)O haha~

Considering that some friends have difficulty finding dynamic pictures, I will attach a few.

Picture source (free download): https://pixabay.com/

Dare to try and innovate, and let your creativity shine! If you like this blog, please share it with your friends and feel free to share your thoughts and ideas with me in the comment area. Learning never ends, let’s continue moving forward in the wonderful world of CSS together!

Thank you for reading and I look forward to seeing you again in the next blog!