时间戳

首页 > 解决方案 > 如何使图像幻灯片的叠加层向右显示在 css3 动画中的图像

css - 如何使图像幻灯片的叠加层向右显示在 css3 动画中的图像

问题描述

我正在用 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>

我希望把它滑到底层：在慢慢滑到右边之前

标签： csscss-transitionscss-animationsloading

解决方案

@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>

推荐阅读