我正在用CSS做一个页面加载器,我想以向右滑动覆盖的方式显示徽标,例如加载栏,但是在这里要制作加载徽标而不是加载栏。这是我的代码
.underlay{
width: 300px;
height:300px;
margin-left: 300px;
margin-top: 15%;
}
.underlay:before{
content:"";
width: 300px;
height:300px;
position: absolute;
top: 15%;
left: 300px;
z-index: 99;
background: rgba(0,0,0,0.9);
animation-name: slide;
}
<div class="outer">
<div class="underlay">
<img src="logo.png" alt="loading logo">
</div>
</div>
我希望将其滑动到底层:在缓慢滑动到右侧之前
答案 0 :(得分:1)
@Ahtsham Ul Haq:试试此代码,希望它对您有用!
.outer {
transition: all 0.3s linear;
}
.underlay img {
width: 300px;
height:300px;
display: block;
left: 10px
/* margin-left: 300px; */
/* margin-top: 15%; */
}
.underlay:before{
content: "";
width: 300px;
height: 300px;
position: absolute;
top: 10px;
/* left: 300px; */
z-index: 99;
background: rgba(0, 0, 0, 0.6);
transition: all 0.3s linear;
}
.outer:hover .underlay:before {
width: 0;
}
<div class="outer">
<div class="underlay">
<img src="https://i.ibb.co/8M3cFG4/bbb.jpg" alt="loading logo">
</div>
</div>
答案 1 :(得分:1)
我有这个,对我有用。感谢您帮助我@Asiya Fatima
.underlay:before{
content:"";
width: 300px;
height:300px;
position: absolute;
top: 200px;
left:0;
z-index: 99;
background: rgba(0,0,0,0.9);
animation-name: slide;
animation-duration: 7s;
animation-timing-function: linear;
}
@-webkit-keyframes slide{
0%{
left:510px;
}
100%{
left:850px;
}
}