CSS转换宽度从右到左
Oli*_*ett 5 html javascript css css3 css-transitions
我已经制作了一个标题(欢迎这个词),一旦页面加载(onload="")就会显示出来.
如果下面的代码不起作用,请小提琴.
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;
}<body onload="animate()">
<h1 id="mainText">Welcome</h1>
</body>CSS和Plain JS工作得很好,但是我希望首先在右侧显示"欢迎"这个词然后继续移动,所以从e到W,而不是当前的状态,从左到右打开.
我试过了text align: right;,但这并没有改变任何事情.
如果解决方案是JS,我最好不要使用任何jQuery.
这个期望的外观应该是一个例子,过渡的一半:
是的，可以使用 Transitions 和 Positions：
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%;
}<h1><span class="mask"></span>Welcome</h1>我刚刚写了一篇关于这个的文章 - CSS Transitions & JavaScript for Animated Entry Effects。希望有用...:)
您可以使用clip-path属性来裁剪元素的各个部分，以使它们不可见。也可以使用动画中的forwards关键字对该属性进行动画处理以再次显示元素，以使其保持在“已显示”的最终状态。
该inset为了取那些值：从顶部，从偏右，从底部，从左。
#text {
margin: 0;
font-size: 100px;
animation: reveal 2s forwards;
}
@keyframes reveal {
from {
clip-path: inset(0 0 0 100%);
}
to {
clip-path: inset(0 0 0 0);
}
}<h1 id="text">Welcome</h1>