英文:
Shine effect html animation
问题
我在动画方面遇到问题，我希望过渡只发生一次，或者在两侧不可见。文本停在中间或两侧，尝试改变背景位置也没有起作用。
<div class="content">
<p> Lorem Ipsum只是印刷和排版业的虚拟文本。 Lorem Ipsum自1500年以来一直是该行业的标准虚拟文本</p>
</div>
.content p{
font-size: 20px;
line-height: 35px;
font-weight: bold;
font-family: sans-serif;
cursor: pointer;
}
.content p{
background: linear-gradient(to right, white, hsl(0, 0%, 0%) 10%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shine 2s infinite linear;
}
@keyframes shine {
0% {
background-position: 0;
}
60% {
background-position: 600px;
}
100% {
background-position: 600px;
}
}
英文:
I have a problem with the animation, I would like the transition to happen only once, or not be visible on both sides. The text stops in the middle or on the sides, trying to change background-position it also did not work
<div class="content">
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
.content p{
font-size: 20px;
line-height: 35px;
font-weight: bold;
font-family: sans-serif;
cursor: pointer;
}
.content p{
background: linear-gradient(to right, white, hsl(0, 0%, 0%) 10%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shine 2s infinite linear;
}
@keyframes shine {
0% {
background-position: 0;
}
60% {
background-position: 600px;
}
100% {
background-position: 600px;
}
}
答案1
得分: 3
使用Reza的代码，我成功地通过将".content div"中的"animation:shine 2.5s infinite;"更改为"animation:shine 2.5s 1;"，以及"left"更改为"-100px"来进行轻微修改。
.content {
position: relative;
overflow: hidden;
width: 600px;
}
.content p {
font-size: 20px;
line-height: 35px;
font-weight: bold;
font-family: sans-serif;
cursor: pointer;
}
.content div {
position: absolute;
top: 0;
height: 100%;
left: -100px;
width: 30%;
background: linear-gradient(to right, white, transparent 50%);
-webkit-text-fill-color: transparent;
animation: shine 2.5s 1;
overflow: hidden;
}
@keyframes shine {
0% {
left: -10%;
}
100% {
left: 110%;
}
<div class="content">
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<div>
</div>
</div>
英文:
Using Reza's code, I was able to modify slightly ".content div" by changing "animation:shine 2.5s infinite;" to "animation:shine 2.5s 1;", and "left" to "-100px".
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.content {
position: relative;
overflow: hidden;
width: 600px;
}
.content p {
font-size: 20px;
line-height: 35px;
font-weight: bold;
font-family: sans-serif;
cursor: pointer;
}
.content div {
position: absolute;
top: 0;
height: 100%;
left: -100px;
width: 30%;
background: linear-gradient(to right, white, transparent 50%);
-webkit-text-fill-color: transparent;
animation: shine 2.5s 1;
overflow: hidden;
}
@keyframes shine {
0% {
left: -10%;
}
100% {
left: 110%
}
<!-- language: lang-html -->
<div class="content">
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论