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=""/>in<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> 没有这个缺陷的作品，但我不知道，如何删除创建元素周围的细黑线，粉红色 squire 周围的边框，如下所示，显示为.svg, 。gif, .png. 我试过 add 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;}在文本的底行使用 of。这是<img>和<div id="container"></div>区别：

解决方案：

因此，我在Prajyot Tote的帮助下为我的特定任务找到的解决方案，基于答案， #container不使用#imgwith border: 0px;for .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>

标签： htmlcssanimationbackground

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是为了美观。