旋转文本具有挖空效果；背景图片不应旋转

debugcn 发表于 Dev

SM64

我正在执行以下剔除文本之一：https : //css-tricks.com/how-to-do-knockout-text/

我也在旋转文本，但是背景图像随文本一起旋转。这是我得到的：

#rotating-c {
    perspective: 1000px;
}

#rotating-c p {
    font-size: 300px;
    font-family: Arial, Helvetica, sans-serif;

    /* Knockout text */
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/10/free-space-textures.jpg);

    color: black;
    display: inline-block;
    margin: 0;
    animation: spin 10s linear infinite;
}

@keyframes spin {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(-360deg);
    }
}

<div id="rotating-c">
    <p>C</p>
</div>

如何使背景图像保持静止并且不随文本旋转？

陪同Afif

我认为背景是不可能的。另一种选择是考虑mask在应用旋转的地方使用SVG。掩码将是文本内容：

#rotating-c {
    width:200px;
    height:200px;
    display: inline-block;
    -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><style>text { transform-origin:center; animation:change 5s linear infinite;} @keyframes change { from {transform:rotateY(0deg)} to { transform:rotateY(360deg); }}<\/style><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" transform-origin="center">C</text></svg>') center/contain;
            mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><style>text { transform-origin:center; animation:change 5s linear infinite;} @keyframes change { from {transform:rotateY(0deg)} to { transform:rotateY(360deg); }}<\/style><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" transform-origin="center">C</text></svg>') center/contain;
  background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/10/free-space-textures.jpg);
}

<div id="rotating-c">
    
</div>

您还可以使用多个掩码来创建一个单词，使用许多字母：

#rotating-c {
    width:600px;
    height:150px;
    display: inline-block;
    -webkit-mask:
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><style>text { transform-origin:center; animation:change 5s linear infinite;} @keyframes change { from {transform:rotateY(0deg)} to { transform:rotateY(360deg); }}<\/style><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" transform-origin="center">A</text></svg>') 0 0,
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><style>text { transform-origin:center; animation:change 5s linear infinite;} @keyframes change { from {transform:rotateY(0deg)} to { transform:rotateY(360deg); }}<\/style><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" transform-origin="center">F</text></svg>') 33.33% 0,
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><style>text { transform-origin:center; animation:change 5s linear infinite;} @keyframes change { from {transform:rotateY(0deg)} to { transform:rotateY(360deg); }}<\/style><text  x="3" y="12" font-family="Arial, Helvetica, sans-serif" transform-origin="center">I</text></svg>') 66.66% 0,
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><style>text { transform-origin:center; animation:change 5s linear infinite;} @keyframes change { from {transform:rotateY(0deg)} to { transform:rotateY(360deg); }}<\/style><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" transform-origin="center">F</text></svg>') 100% 0;
    -webkit-mask-size:150px 100%;
    -webkit-mask-repeat:no-repeat;
            mask:
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><style>text { transform-origin:center; animation:change 5s linear infinite;} @keyframes change { from {transform:rotateY(0deg)} to { transform:rotateY(360deg); }}<\/style><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" transform-origin="center">A</text></svg>') 0 0,
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><style>text { transform-origin:center; animation:change 5s linear infinite;} @keyframes change { from {transform:rotateY(0deg)} to { transform:rotateY(360deg); }}<\/style><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" transform-origin="center">F</text></svg>') 33.33% 0,
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><style>text { transform-origin:center; animation:change 5s linear infinite;} @keyframes change { from {transform:rotateY(0deg)} to { transform:rotateY(360deg); }}<\/style><text  x="3" y="12" font-family="Arial, Helvetica, sans-serif" transform-origin="center">I</text></svg>') 66.66% 0,
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><style>text { transform-origin:center; animation:change 5s linear infinite;} @keyframes change { from {transform:rotateY(0deg)} to { transform:rotateY(360deg); }}<\/style><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" transform-origin="center">F</text></svg>') 100% 0;
            mask-size:150px 100%;
            mask-repeat:no-repeat;
  background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/10/free-space-textures.jpg);
}