javascript – 从右到左的CSS过渡宽度

我已经制作了一个标题(欢迎一词),一旦页面加载(onload =“”)就会显示出来.

Fiddle,以防下面的代码不起作用.

function animate() {
  document.getElementById("mainText").style.width = "100%";

}

#mainText {
  margin: 0px;
  display: inline-block;
  font-size: 100px;
  width: 0%;
  transition: width 2s;
  white-space: Nowrap;
  overflow: hidden;
  text-overflow: clip;
}

CSS和Plain JS工作得很好,但是我希望首先在右侧显示“欢迎”这个词然后继续移动,所以从e到W,而不是当前的状态,从左到右打开.

我试过了文字对齐：对;但这并没有改变任何东西.

如果解决方案是JS,我最好不要使用任何jQuery.

这个期望的外观应该是一个例子,过渡的一半：

最佳答案

是的,可以使用过渡和位置：

window.onload = function () {
  document.querySelector("h1").classList.add("active");
};

h1 {
  overflow: hidden;
  display: inline-block;
  position: relative;
}
h1 .mask {
  position: absolute;
  transition: all 0.5s linear;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: #fff;
}
h1.active .mask {
  right: 100%;
}

我刚写了一篇关于这个的文章 – CSS Transitions & JavaScript for Animated Entry Effects.希望它有用……

原文地址：https://www.jb51.cc/html/426724.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。

• 上一篇：html – 想要将背景图像放在中间位下一篇：html – 复选框的CSS格式