我把我的徽标放在两行之间，我想要动画那两行

Question

＆＃13;

＆＃13;

define('DB_NAME', 'database-name');
define('DB_USER', 'database-username');
define('DB_PASSWORD', 'database-password');
define('DB_HOST', 'localhost');

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我将我的徽标放在两行之间，我想要动画这两行，一行从左到右，另一行从右到左。 ： - 徽标保持其位置。 （我不知道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>