html - 尝试使用 Webkit Animation CSS 重新创建 Tom Riddle 的文本效果

问题描述

我正在尝试从哈利波特的密室中重新创建汤姆里德尔的文本动画（如此处所示）。我目前仍在尝试使用 css 来模拟它，就像在 Adobe Ae 上所做的那样（如此处所示）。目前，我所做的是使用关键帧来模拟循环中的淡入淡出。我不知道如何在这个过程中前进。这是我当前的代码：

body{
    background-color: bisque;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
    font-size: 100px;
}

.center {
    position: absolute;
    width: 550px;
    height: 250px;
    top: 50%;
    left: 50%;
    margin-left: -250px;
    margin-top: -150px; 
}

.tr-fade{
    opacity: 0; 
    transition: opacity 1s ease;
    animation-duration: 6s;
    animation-name: tr-fade-animation;
    animation-delay: 0;
    animation-iteration-count: infinite;
    animation-direction: forward;
}

@keyframes tr-fade-animation {
    0% {
        opacity: 0;
    }
    
    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
  }

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="text-container">
            <div class="center tr-fade">
                Hi, This is Tom Riddle.
            </div>     
        </div>
    </body>
</html>

我研究过 CSS 中的分形噪声，但似乎没有人使用图像遮罩来实现文本过渡效果。我应该使用什么方法来获得所需的效果（可能是 SVG 动画）？对此有什么帮助吗？

标签： htmlcsscss-animations

html - 尝试使用 Webkit Animation CSS 重新创建 Tom Riddle 的文本效果

问题描述

解决方案

推荐阅读