时间戳

首页 > 解决方案 > 带有移动背景的剪辑文本

css - 带有移动背景的剪辑文本

问题描述

我找到了一种很好的方法来水平连续移动背景。我追求的效果是创造火焰的错觉，所以背景需要垂直移动。有没有办法做到这一点？我使用 Elementor 作为构建器。

我的css代码如下

.mask_text .elementor-widget-container {
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -o-background-clip: text;
    animation: maskText 50s linear infinite;
    -webkit-animation: maskText 50s linear infinite;
}

.mask_text .elementor-widget-container h2{
    color:transparent !important;
}

@keyframes maskText{
  from{ background-position: 0px center}
  to{ background-position: 2000px center}

}

@-webkit-keyframes maskText{
  from{ background-position: 0px center}
  to{ background-position: 2000px center}
}

标签： csswordpresselementor

解决方案

要垂直移动，您需要更改的是向背景位置添加第二个值：

background-position: <horizontal> <vertical>


h1 {
        margin: 0;
        font-size: 100px;
        color: transparent;
        background: rgb(203,8,202);
        background: linear-gradient(175deg, rgba(203,8,202,1) 0%, rgba(131,46,189,1) 35%, rgba(255,252,0,1) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        animation: maskText 50s linear infinite;
      }

      @keyframes maskText{
        from{ background-position: center 2000px}
        to{ background-position: center 0}
      }
<h1>My Text</h1>

推荐阅读