<img></img> 元素周围的线条

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;
}

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

所以，从背景的另一种方式：

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> 没有这个缺陷，但我不知道如何删除创建元素周围的细黑线，粉红色 squire 周围的边框，如下所示，它与 .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("https://i.stack.imgur.com/d0tnz.png"); }
  32%   { background: url("https://i.stack.imgur.com/d0tnz.png"); }
  33%  { background: url("https://i.stack.imgur.com/elROb.png"); }
  65%  { background: url("https://i.stack.imgur.com/elROb.png"); }
  66% { background: url("https://i.stack.imgur.com/O0fGg.png"); }
  100% { background: url("https://i.stack.imgur.com/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("https://i.stack.imgur.com/d0tnz.png");
  }
  32% {
    background: url("https://i.stack.imgur.com/d0tnz.png");
  }
  33% {
    background: url("https://i.stack.imgur.com/elROb.png");
  }
  65% {
    background: url("https://i.stack.imgur.com/elROb.png");
  }
  66% {
    background: url("https://i.stack.imgur.com/O0fGg.png");
  }
  100% {
    background: url("https://i.stack.imgur.com/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 是为了美观。

Answer 2

border: 1px solid #FFFFFF;

使用此属性，希望它有效。如果它不起作用，则将边框大小增加到 2 或 3 px。或使用border: none; property。