所以我正在嘗試創建一個text reveal/text-slide-in影片。
我創建了這個：
@keyframes slide {
0% {
left: 0;
}
100% {
left: 105%;
}
}
.text-slide-in:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 105%;
animation: slide 1.5s ease infinite;
background: white;
box-shadow: 0 0 15px white, 0 0 10px white, 0 0 5px white;
}<h1 class="text-slide-in">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</h1>這正是我所追求的效果/影片。問題是這基本上會產生不必要的寬度。您可以在代碼片段上看到水平滾動條。
background-color將 a 添加到父元素時，這種方法的另一個問題變得很明顯：
.site-wrap {
max-width: 700px;
margin: 0 auto;
}
section {
padding: 4rem;
border-radius: 8px;
background-color: red;
}
@keyframes slide {
0% {
width: 100%;
}
100% {
width: 0;
}
}
.text-slide-in {
position: relative;
}
.text-slide-in:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
animation: slide 1.5s ease infinite;
background: white;
box-shadow: 0 0 15px white, 0 0 10px white, 0 0 5px white;
}<div class="site-wrap">
<section>
<h1 class="text-slide-in">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</h1>
</section>
</div>如您所見，設定 a 時它將不起作用background-color。
我也試過用transform& translateXcss 屬性來做這個，但我也不能讓它作業。
在這種情況下，什么是可靠的解決方案？
uj5u.com熱心網友回復：
使用剪輯路徑：
@keyframes slide {
0% {
clip-path: inset(0 100% 0 0);
}
100% {
clip-path: inset(0 0 0 0);
}
}
.text-slide-in {
animation: slide 1.5s ease infinite;
}
body {
background:linear-gradient(90deg,red,lightblue);
}<h1 class="text-slide-in">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</h1>uj5u.com熱心網友回復：
您可以為寬度設定影片并從右側開始您的位置，而不是為左側設定影片：
@keyframes slide {
0% {
width: 100%;
}
100% {
width: 0;
}
}
.text-slide-in:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
animation: slide 1.5s ease infinite;
background: white;
box-shadow: 0 0 15px white, 0 0 10px white, 0 0 5px white;
}<h1 class="text-slide-in">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</h1>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/453187.html