javascript - 如何为边框设置动画，使其从头到尾缓慢显示

标签 javascript html css

我想为边框设置动画并慢慢显示，类似于this Codepen , 有一些区别:

  • 不删除旧行，但需要显示类似内容。

  • 颜色不应该是 NEON ，只是简单的边框

  • 应该只做一次动画，不要重复。

一段简单的代码如下所示

<div class="boxes">
  <div class="row">
    <div
      class="col-lg-6"
      data-aos="zoom-in-right"
      data-aos-duration="800"
    >
      <div class="right-box left">
        <h2>Heading1.</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Nulla in erat et quam semper convallis. Phasellus vel nisl
          id leo suscipit molestie. Sed nec dignissim urna. Donec
          sit amet tortor nulla. Etiam tempus dui id ipsum commodo,
          et laoreet tortor luctus. Ut dapibus.
        </p>
      </div>
    </div>
    <div
      class="col-lg-6"
      data-aos="zoom-in-left"
      data-aos-duration="800"
    >
      <div class="left-box">
        <img
          src="https://via.placeholder.com/650x430"
          class="img-fluid"
          alt=""
        />
      </div>
    </div>
  </div>
</div>

但要详细查看，请查看此 jsfiddle 链接 https://jsfiddle.net/ah0rokpj/1/ 请以完整 View 或更大的屏幕尺寸查看此 jsfiddle，否则它不会显示。我希望那个石灰边框是动画的。

enter image description here

我希望它像图片一样具有动画效果。

最佳答案

使元素的边框看起来像动画的一种方法是通过逐渐缩小覆盖每个边框的 5 像素宽(或高取决于哪个边框)100% 宽的元素依次逐渐揭开边框。

此代码段通过为元素上的 after 伪元素设置动画并同时将一个接一个的边框放入所需的最终颜色来实现这一点。

您可以将此代码段中的 movingBorder 类放到其他元素上以获得移动边框效果。

.movingBorder {
  width: 60vw;
  height: 60vh;
  border: solid 5px lime;
  position: relative;
  background: pink;
  animation: changeBorders 5s linear;
}

@keyframes changeBorders {
  0% {
    border: solid 5px white;
    border-left: solid 5px lime;
  }
  25% {
    border: solid 5px white;
    border-left: solid 5px lime;
  }
  25.02% {
    border: solid 5px white;
    border-left: solid 5px lime;
    border-bottom: solid 5px lime;
  }
  50% {
    border: solid 5px white;
    border-left: solid 5px lime;
    border-bottom: solid 5px lime;
  }
  50.02% {
    border: solid 5px white;
    border-left: solid 5px lime;
    border-bottom: solid 5px lime;
    border-right: solid 5px lime;
  }
  75% {
    border: solid 5px white;
    border-left: solid 5px lime;
    border-bottom: solid 5px lime;
    border-right: solid 5px lime;
  }
  75.02% {
    border: solid 5px lime;
  }
}

.movingBorder::after {
  width: 5px;
  background-color: white;
  height: 0px;
  position: absolute;
  bottom: 0;
  left: -5px;
  z-index: 1;
  animation: movedown 5s linear;
  animation-fill-mode: forwards;
  content: '';
  display: inline-block;
}

@keyframes movedown {
  0% {
    height: calc(100% + 10px);
    width: 5px;
    bottom: -5px;
    left: -5px;
  }
  25% {
    height: 5px;
    width: 5px;
    bottom: -5px;
    left: -5px;
  }
  25.01% {
    height: 5px;
    width: calc(100% + 10px);
    bottom: -5px;
    left: -5px;
  }
  50% {
    height: 5px;
    width: 0%;
    left: 100%;
    bottom: -5px;
  }
  50.01% {
    height: calc(100% + 10px);
    width: 5px;
    left: 100%;
    bottom: -5px;
  }
  75% {
    height: 0;
    width: 5px;
    left: 100%;
    bottom: 100%;
  }
  75.01% {
    height: 5px;
    width: calc(100% + 10px);
    left: 0%;
    bottom: 100%;
  }
  99.01% {
    height: 5px;
    width: 0;
    left: 0;
    bottom: 100%;
  }
}
<div class="movingBorder" style="background: pink; width: 60vw; height: 60vh;"></div>

更新:以上适用于方形边框，但要求是设置了半径的边框。此代码段将一个 after 元素放在边框上(位于 before 伪元素上)，该元素最初具有以下形状:

enter image description here

这会逐渐向左移动，露出石灰边框的顶部。然后将左侧部分设置为透明，伪元素向右移动，逐渐露出边框的底部。

注意:在整页中运行此代码段以查看效果。动画会延迟 10 秒，以便您有时间这样做(否则动画在您到达那里之前就已完成)。

* {
  margin: 0px;
  padding: 0px;
  list-style: none;
  border: none;
  text-decoration: none;
  outline: none;
}

::-webkit-input-placeholder {
  color: inherit;
  opacity: 1;
}

:-ms-input-placeholder {
  color: inherit;
  opacity: 1;
}

::placeholder {
  color: inherit;
  opacity: 1;
}

html,
body {
  height: 100%;
}

.col-lg- {}

.col-md- {}

.col-sm- {}

.col- {}

.img-fluid {}

.container-fluid {}

.justify-content-center {}

.row {}

.my-auto {}

.p0 {}

.container {
  width: 100%;
  max-width: 1170px;
}

.container-fluid {
  width: 100%;
  max-width: 1440px;
}

@media (max-width: 1199px) {
  .container {
    width: 100%;
    max-width: 100%;
  }
}


/*** ### Section One ### ***/

.section-one {
  position: relative;
  background: #ffffff;
}

.section-one h2 {
  color: #000000;
  font-size: 32px;
  margin: 0px 0px 10px 0px;
  padding: 0px;
  font-family: "AzoSans-Medium";
}

.section-one p {
  color: #000000;
  font-size: 16px;
  margin: 10px 0px;
  padding: 0px;
  font-family: "AzoSans-Regular";
}

.section-one .boxes {
  position: relative;
  margin-top: 75px;
}

.section-one .boxes:last-child {
  margin-bottom: 100px;
}

.section-one .boxes .left-box {
  position: relative;
  margin: 25px 0px 0px 0px;
  z-index: 3;
}

.section-one .boxes .left-box img {
  width: 100%;
}

.section-one .boxes .right-box {
  position: relative;
  margin: 25px 0px 0px 0px;
  height: 100%;
  z-index: 2;
}

.section-one .boxes .right-box:before,
.section-one .boxes .right-box::after {
  position: absolute;
  content: "";
  top: 50px;
  left: -30px;
  right: 0px;
  bottom: 25px;
  z-index: -2;
  /* so we can have another pseudo element overlaying it */
}

.section-one .boxes .right-box:before {
  border: 1px solid lime;
}

.section-one .boxes .right-box.left h2 {
  text-align: left;
}

.section-one .boxes .right-box.left:before,
.section-one .boxes .right-box.left::after {
  left: 0px;
  right: -30px;
}

.section-one .boxes .right-box.left:before {
  border-right: none;
  border-radius: 250px 0px 0px 250px;
}

.section-one .boxes .right-box::after {
  width: 200%;
  height: 100%;
}

.section-one .boxes .right-box.left::after {
  background-position: 0 0, 100% 75%;
  background-size: calc(50% + 30px) 100%, 50% 50%;
  background-repeat: no-repeat no-repeat, no-repeat no-repeat;
  background-image: linear-gradient(white, white), linear-gradient(white, white);
  animation: left 10s ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 10s;
  /* just to give time to go full screen on SO snippet! */
}

@keyframes left {
  0% {
    background-image: linear-gradient(white, white), linear-gradient(white, white);
    transform: translateX(0);
  }
  49.99% {
    background-image: linear-gradient(white, white), linear-gradient(white, white);
  }
  50% {
    background-image: linear-gradient(transparent, transparent), linear-gradient(white, white);
    transform: translateX(-50%);
  }
  99.99% {
    background-image: linear-gradient(transparent, transparent), linear-gradient(white, white);
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.section-one .boxes .right-box.right h2 {
  text-align: right;
}

.section-one .boxes .right-box.right:before {
  border-left: none;
  border-radius: 0px 250px 250px 0px;
}

.section-one .boxes .right-box h2 {
  padding: 50px 0px 20px 0px;
}

.section-one .boxes .right-box p {
  display: block;
  margin: 15px auto;
  width: 100%;
  max-width: 355px;
  text-align: justify;
}

.section-one .boxes .action-btn {
  position: relative;
  text-align: right;
}

@media (max-width: 1199px) {
  .section-one h2 {
    font-size: 28px;
  }
  .section-one p {
    font-size: 15px;
  }
  .section-one .boxes {
    position: relative;
    margin-top: 50px;
  }
  .section-one .boxes:last-child {
    margin-bottom: 75px;
  }
  .section-one .boxes .right-box:before {
    left: -30px;
  }
  .section-one .boxes .right-box.left h2 {
    text-align: left;
  }
  .section-one .boxes .right-box.left:before {
    border-radius: 200px 0px 0px 200px;
  }
  .section-one .boxes .right-box.right h2 {
    text-align: left;
  }
  .section-one .boxes .right-box.right:before {
    border-radius: 0px 200px 200px 0px;
  }
  .section-one .boxes .right-box h2 {
    padding: 50px 0px 15px 0px;
  }
  .section-one .boxes .right-box p {
    display: block;
    margin: 15px auto;
    width: 100%;
    max-width: 355px;
    text-align: justify;
  }
  .section-one .boxes .action-btn {
    position: relative;
    text-align: right;
  }
}

@media (max-width: 991px) {
  .section-one h2 {
    font-size: 25px;
  }
  .section-one .boxes {
    position: relative;
    margin-top: 10px;
  }
  .section-one .boxes:last-child {
    margin-bottom: 30px;
  }
  .section-one .boxes .right-box:before {
    display: none;
  }
  .section-one .boxes .right-box.right:before {
    display: none;
  }
  .section-one .boxes .right-box h2 {
    padding: 0px 0px 15px 0px;
    margin: 0px;
  }
  .section-one .boxes .right-box p {
    display: block;
    margin: 0px auto 15px auto;
    width: 100%;
    max-width: 100%;
    text-align: justify;
  }
  .section-one .boxes .action-btn {
    position: relative;
    text-align: right;
  }
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<section class="section-one">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="boxes">
          <div class="row">
            <div class="col-lg-6 aos-init" data-aos="zoom-in-right" data-aos-duration="800">
              <div class="right-box left">
                <h2>Heading1.</h2>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in erat et quam semper convallis. Phasellus vel nisl id leo suscipit molestie. Sed nec dignissim urna. Donec sit amet tortor nulla. Etiam tempus dui id ipsum commodo, et laoreet tortor luctus.
                  Ut dapibus.
                </p>
              </div>
            </div>
            <div class="col-lg-6 aos-init" data-aos="zoom-in-left" data-aos-duration="800">
              <div class="left-box">
                <img src="https://via.placeholder.com/650x430" class="img-fluid" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

当文本位于图像右侧时，显然必须添加等效的 CSS。

关于javascript - 如何为边框设置动画，使其从头到尾缓慢显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69286006/

上一篇：r - libstdc++.so.6 : version `GLIBCXX_3.4.26' not found on Linux

下一篇：azure - Terraform:将整个资源组移动到新的 Azure 订阅

相关文章：

javascript - 突出显示 div 中的文本

php - DOMXPath var_dump : "(object value omitted)"

html - 下拉导航栏

ios - 在 iOS 中聚焦 Select 时 Safari 和 Chrome 卡住

html - CSS 显示表不遵守固定高度

javascript - 使用 angularjs 保存 gridster 布局

javascript - 如何避免在 javascript 中编写 HTML 标签

javascript - 简化方法以确保时间格式正确

javascript - onclick 未被调用(带有建议的搜索框下拉列表)

css - 我的背景图片不会显示

©2024 IT工具网  联系我们