Question

我最近发现了以下用于文本进度样式的方法，并且想知道是否存在从中心增加元素宽度的变通方法，因此文本也将填充从中心而不是从左侧填充。

＆＃13;

f = Foo()
print(f.__table__.c['id'].default.name)

＆＃13;

body {
  background-color: black;
}

p {
  color: rgba(255, 255, 255, .4);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 40px;
  height: 85px;
  position: relative;
}

p:before {
  max-width: 100%;
  width: 0;
  height: 85px;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  content: attr(data-text);
  display: block;
  animation: background-fill 15s ease-in-out infinite forwards;
}
  
@keyframes background-fill {
  0% {
    width: 0;
   }
  100% {
    width: 100%;
  }
}

＆＃13;

Answer 1

您也可以通过动画left和text-indent

来实现这一目标

我还将您的p更改为显示为内嵌块，因此它会为文本设置动画而不是空格。

感谢Gaby aka G. Petrioli，看起来Firefox存在基于百分比的text-indent问题，所以我添加了一个CSS黑客来解决这个问题。再次感谢Gaby，因为他现在的删除答案，解决了Firefox问题（虽然不幸在IE上失败）

＆＃13;

body {
  background-color: black;
}

p {
  color: rgba(255, 255, 255, .4);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 40px;
  height: 85px;
  position: relative;
  display: inline-block;
}

p:before {
  max-width: 100%;
  width: 0;
  height: 85px;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  content: attr(data-text);
  display: block;
  animation: background-fill 5s ease-in-out infinite forwards;
}
  
@keyframes background-fill {
  0% {
    left: 50%;
    text-indent: -50%;
    width: 0;
   }
  100% {
    left: 0;
    text-indent: 0;
    width: 100%;
  }
}

/*  Begin - Firefox bug fix  */
@supports (-moz-appearance:meterbar) and (display:flex) {
  p:before {
    width: auto;
    right: 50%;
    left: 50%;
    display: flex;
    justify-content: center;
  }
  @keyframes background-fill {
    0% {
      right: 50%;
      left: 50%;
    }
    100% {
      right: 0;
      left: 0;
    }
  }
}
/*  End - Firefox bug fix  */

＆＃13;

<p data-text='Text'>Text</p>

＆＃13;

CSS hack的替代方案是一个小脚本，在页面加载时，测量元素的实际宽度，并将text-indent设置为px而不是%。

成长：在中心内容宽度之前

1 个答案: