首页 文章

褪色图片库

提问于
浏览 次
0

我有图像库并且有问题似乎在观看者较小时向右边创建某种空间然后说350px在我的网站的整个右侧留下间隙 . 我正在尝试使此图库具有响应性，以便根据查看器大小调整每个内容的大小 .

这是代码：

CSS

.crossfade > figure {
    animation: imageAnimation 30s linear infinite 0s;
    backface-visibility: hidden;
    background-size: cover;
    background-position: center center;
    color: transparent;
    height: 50%;
    opacity: 0;
    margin-left: 0px;
    margin-top: 0px;
    position: absolute;
    width: 100%;
    left: -1px;
    z-index: 0;
    border: thin solid black;
}

.crossfade > figure:nth-child(1) {
  background-image:url(001.jpg);
}
.crossfade > figure:nth-child(2) {
  animation-delay: 6s;
  background-image:url(002.jpg);
}
.crossfade > figure:nth-child(3) {
  animation-delay: 12s;
  background-image:url(003.jpg);
}
.crossfade > figure:nth-child(4) {
  animation-delay: 18s;
  background-image:url(004.jpg);
}
.crossfade > figure:nth-child(5) {
  animation-delay: 24s;
  background-image: url(005.jpg);
}

@keyframes imageAnimation {
  0% {
    animation-timing-function: ease-in;
    opacity: 0;
  }
  8% {
    animation-timing-function: ease-out;
    opacity: 1;
  }
  17% {
    opacity: 1
  }
  25% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}

HTML

<body>
<figure class="crossfade">
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
  </figure>
</body>

希望这能很好地理解我正在使用的东西，你可以复制任何问题 . 我觉得有一些东西可以用这个图像库来完成，这对于一个响应式网站来说是好的，但有些东西不正确导致向右移动 .

html css css3 html5-canvas

1 回答

  • 0

    首先，您的 <figure> 标签有边距 . 有必要吗？
    如果没有，请将其添加到 figure css： margin: 0px;

    第二，你的意思是这个差距？

    Is this your gap?

    如果是这样，你的头衔就在这里 .
    enter image description here

    要修复它，请减少 font-size 或使用javascript根据页面宽度调整字体大小 .

    EDIT: 您可能希望将其添加到 <head> 标记中：
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">

    修复了移动浏览器上的缩放问题，但要确保您的字体足够大，因为它会禁用缩放 .

    对不起，如果我有点偏离主题 . 我只想完善我的工作 .

    回复于

相关问题