javascript - 我把我的标志放在两条线之间，我想为这两条线制作动画

Question

.lines {
    display: flex;
    align-items: center;
}
.lines:before {
    content: '';
    margin: 0 15px 0px 0px;
    border: 2px solid black;
    flex: 1;
}
.lines:after {
    content: '';
    margin: 0 0px 0px 15px;
    border: 2px solid black;
    flex: 1;
}
.lines img {
    margin: 0 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="logo_container">
    <div class="lines"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/967511-200.png" />
</div>

我将 Logo 放在两条线之间，我想为这两条线设置动画，一条从左到右，另一条从右到左。 :- 标志留在原位。 (我不懂 javascript 和 jquery)

Answer 1

您可以使用 CSS3 动画。取决于你想如何为线条设置动画。这里有一些你可以做的方法。 w3 Link

线条动画1

.lines {
  display: flex;
  align-items: center;
}

.lines:before {
  content: '';
  margin: 0 15px 0px 0px;
  border: 2px solid black;
  flex: 1;
}

.lines:after {
  content: '';
  margin: 0 0px 0px 15px;
  border: 2px solid black;
  flex: 1;
}

.lines img {
  margin: 0 1em;
}

.lines {
  right: 0;
  -webkit-animation: dude 1s 1 forwards;
  animation: dude 2s 1 forwards;
}

@-webkit-keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@keyframes dude {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="logo_container">
  <div class="lines"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/967511-200.png"></div>
</div>

线条动画2

.lines {
  display: flex;
  align-items: center;
}

.lines:before {
  content: '';
  margin: 0 15px 0px 0px;
  border: 2px solid black;
  flex: 1;
}

.lines:after {
  content: '';
  margin: 0 0px 0px 15px;
  border: 2px solid black;
  flex: 1;
}

.lines img {
  margin: 0 1em;
}

.lines:before,
.lines:after {
  animation: blink-animation 1.5s steps(5, start) infinite;
  -webkit-animation: blink-animation 1.5s steps(5, start) infinite;
}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="logo_container">
  <div class="lines"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/967511-200.png"></div>
</div>

图像动画

.lines {
  display: flex;
  align-items: center;
}

.lines:before {
  content: '';
  margin: 0 15px 0px 0px;
  border: 2px solid black;
  flex: 1;
}

.lines:after {
  content: '';
  margin: 0 0px 0px 15px;
  border: 2px solid black;
  flex: 1;
}

.lines img {
  margin: 0 1em;
}

.image {
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="logo_container">
  <div class="lines"><img class="image" src="https://d30y9cdsu7xlg0.cloudfront.net/png/967511-200.png"></div>
</div>