html - 围绕 元素划线

Question

我想要动画 3 .svg图片:

<div class="sequence">
  <img src="assets/img/1.svg"/>
  <img src="assets/img/2.svg"/>
  <img src="assets/img/3.svg"/>
</div>

和css :

.sequence {
  position: relative;
}

.sequence img {
  position: absolute;
  top: 0;
  opacity: 0;  
  animation: cycle 0.3s steps(1) infinite;
}

@keyframes cycle {
  0%  { opacity: 1; }
  33% { opacity: 0; }
}

.sequence img:nth-child(2) {
  animation-delay: 0.1s;
}

.sequence img:nth-child(3) {
  animation-delay: 0.2s;
}

但这种方式在某些时候动画开始滑动和闪烁，包括 <img src="assets/img/1.svg" alt="" alt=""/>在 <a class="sequence" id="anm">不允许很好地将图像与元素中心对齐。

那么，从后台换个方式:

img{
  width: 60px;
  height: 60px;
  border: 0px;     
  border-style: none;  /*border-style: hidden;*/
  outline: none;
  animation:  rotateImages 0.3s infinite; 
}

@keyframes rotateImages {
  0%   { background: url("assets/img/1.svg"); }
  32%   { background: url("assets/img/1.svg"); }
  33%  { background: url("assets/img/2.svg"); }
  65%  { background: url("assets/img/2.svg"); }
  66% { background: url("assets/img/3.svg"); }
  100% { background: url("assets/img/3.svg"); }
}

与 <img></img>工作没有这个缺乏，但我无法弄清楚，如何删除创建元素周围的细黑线，粉红色乡绅周围的边框，如下所示，它与 .svg 一起出现,. gif , .png .我试过添加 border-width: 0px; ，以防万一 border-color: white;因为我的背景是白色的，但它看起来像是别的东西。我不确定如何删除它:

示例:

https://jsfiddle.net/3gxpbauo/

.png-s ，与 .svg 的图像相同:

正如我所指出的，我希望将其与 <label><h1><p id="nameblock">Text</p></h1></label> 对齐在一条文本中心线上.与 <div id="container"></div> , 如图所示 Prajyot Tote回答，或如上所示 <a class="sequence" id="anm"> , (它也成功地显示了没有轮廓的标签)，在这两种情况下都将元素对齐在单独的行上，或者使用 .inline{display:inline-block;}在文本的底部。这是 <img>和 <div id="container"></div>区别:

解决方案:

因此，我在 Prajyot Tote 的帮助下为我的特定任务找到了解决方案，根据答案，使用 #container没有#img与 border: 0px;对于 .inline :

#container {
  width: 72px;
  height: 73px;
  border: 0px;
  animation:  rotateImages 0.3s infinite; 
}

.inline{display:inline-block;vertical-align: middle; border: 0px;}

@keyframes rotateImages {
  0%   { background: url("/image/d0tnz.png"); }
  32%   { background: url("/image/d0tnz.png"); }
  33%  { background: url("/image/elROb.png"); }
  65%  { background: url("/image/elROb.png"); }
  66% { background: url("/image/O0fGg.png"); }
  100% { background: url("/image/O0fGg.png"); }
}

<div class="inline">
  <label><h1><p id="nameblock">Some text</p></h1></label>
</div>
<div id="container" class="inline"></div>

Answer 1

问题不在于边框或 svg 或 png，而是您正在使用的标签。

background-image 可以与任何元素一起使用。将 img 标签更改为 div ，一切都会好起来的。

#container,
img {
  width: 60px;
  height: 60px;
  animation: rotateImages 0.3s infinite;
}

h1 {
  margin: 0;
  line-height: 1;
  padding: 0 20px;
}

.inline {
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #eee;
}

@keyframes rotateImages {
  0% {
    background: url("/image/d0tnz.png");
  }
  32% {
    background: url("/image/d0tnz.png");
  }
  33% {
    background: url("/image/elROb.png");
  }
  65% {
    background: url("/image/elROb.png");
  }
  66% {
    background: url("/image/O0fGg.png");
  }
  100% {
    background: url("/image/O0fGg.png");
  }
}

<div class="sequence">
  <div class="inline">
    <label><h1><p id="nameblock">Some text</p></h1></label>
  </div>
  <div id="container" class="inline"></div>
</div>

我们看到的边框是空的 img 标签。无法帮助呈现空的 img 标签。

更新代码以使元素正确内联。

注意:添加了border，以便可以正确看到元素的位置。 padding 是为了美观。