我正在尝试将动画制作为div,但问题是使反射消失的div会在按钮外进行过渡。
如何实现将反射div叠加在按钮div内?
body {
background-color: grey
}
.outer-div {
position: relative;
overflow: hidden;
max-width: 100%;
}
.status-label {
display: flex;
width: 30%;
justify-content: center;
padding: 0.35em;
color: white;
border-radius: 30px;
font-weight: bold;
background-color: blue;
}
.animate-label:before {
content: "";
position: absolute;
width: 30%;
top: -5%;
height: 105%;
right: 100%;
opacity: 0.2;
transform: rotate(180deg);
background: rgba(255, 255, 255, 0.5);
background: linear-gradient( to right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.7) 77%, rgba(255, 255, 255, 0.2) 92%, rgba(255, 255, 255, 0.25) 100%);
animation: shine 2s infinite;
animation-delay: 0s;
}
@keyframes shine {
to {
opacity: 1;
right: 40%;
}
}
<div class="outer-div">
<div class="status-label animate-label">
<span> Preparing button </span>
</div>
</div>
谢谢。
答案 0 :(得分:1)
您在错误的容器上设置了overflow: hidden;
属性。由于.outer-div
的宽度为100%,因此与.status-label
相比,没有什么可以“切掉”的。
您必须将溢出属性设置为.status-label.animate-label
容器,并使其成为position: relative;
。然后,您可以根据需要调整.animate-label
和@keyframes shine
的属性。