Question

这里给出了这个例子

#mainPage {
  width: 400px;
  height: 165px;
  margin: 10% auto;
}

#mainPage>p {
  text-align: center;
}

.box {
  width: 48px;
  height: 30px;
  background: red;
}

#title {
  letter-spacing: 7px;
  font-size: 30px;
  margin-bottom: 30px;
}

#box1 {
  animation: moveBox1 5s infinite;
}

#box2 {
  animation: moveBox2 5s infinite;
}

@keyframes moveBox1 {
  from {
    /* currentPosition */
  }
  25% {
    /* right top corner */
  }
  50% {
    /* right bottom corner */
  }
  75% {
    /* left bottom corner */
  }
  to {
    /* start position */
  }
}

@keyframes moveBox2 {
  from {
    /* currentPosition */
  }
  25% {
    /* left bottom corner */
  }
  50% {
    /* left top corner */
  }
  75% {
    /* right top corner */
  }
  to {
    /* start position */
  }
}

<div id="mainPage">
  <div class="box" id="box1"></div>

  <p id="title">TITLE HERE</p>

  <div class="box" id="box2"></div>
</div>

我想先将box2置于右侧。

这样做后，两个方框应顺时针绕文本移动。我尝试从动画语法开始，但我不知道如何定位它们可以移动其他元素。

所以box1应该有这条路径：

从左上角
到右上角
到右下角
到左下角
回到左上角

box2会有这条路：

从右下角
到左下角
到左上方
到右上角
回到右下角

有人可以帮忙吗？

Answer 1

您可以在红色框元素上使用absolute位置，然后使用css动画更改其位置。这也将使框元素脱离正常的元素流。

body {
  text-align: center;
}

#element{
  text-align: center;
  display: inline-block;
  position: relative;
  margin-top: 30px;
  padding: 30px;
}

.box {
  width: 48px;
  height: 30px;
  background: red;
  position: absolute;
}
#title {
  letter-spacing: 7px;
  font-size: 30px;
  margin: 0;
}
#box1 {
  animation: moveBox1 5s infinite;
  top: 0;
  left: -48px;
}
#box2 {
  animation: moveBox2 5s infinite;
  bottom: 0;
  right: 48px;
}

@keyframes moveBox1 {
  25% {left: 100%; top: 0}
  50% {left: 100%; top: calc(100% - 24px)}
  75% {left: -48px; top: calc(100% - 24px)}
  100% {left: -48px; top: 0}
}

@keyframes moveBox2 {
  25% {right: 100%; bottom: 0;}
  50% {right: 100%; bottom: calc(100% - 24px);}
  75% {right: -48px; bottom: calc(100% - 24px);}
  100% {right: -48px; bottom: 0;}
}

<div id="element">
  <div class="box" id="box1"></div>
  <p id="title">TITLE HERE</p>
  <div class="box" id="box2"></div>
</div>

Answer 2

使用转换，您可以实现解决方案。

＆＃13;

#mainPage {
  width: 400px;
  height: 165px;
  margin: 10% auto;
}

#mainPage>p {
  text-align: center;
}

.box {
  width: 48px;
  height: 30px;
  background: red;
}

#title {
  letter-spacing: 7px;
  font-size: 30px;
  margin-bottom: 30px;
}

#box1 {
  animation: moveBox1 5s infinite;
}

#box2 {
  animation: moveBox2 5s infinite;
}

@keyframes moveBox1 {
  from {
   transform: translate(0, 0);
  }
  25% {
   transform: translate(350px, 0);
  }
  50% {
    transform: translate(350px, 150px);
  }
  75% {
   transform: translate(0, 150px);
  }
  to {
    transform: translate(0, 0);
  }
}

@keyframes moveBox2 {
  from {
    transform: translate(350px, 0);
  }
  25% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -150px);
  }
  75% {
     transform: translate(350px, -150px);
  }
  to {
    transform: translate(350px, 0);
  }
}

＆＃13;

<div id="mainPage">
  <div class="box" id="box1"></div>

  <p id="title">TITLE HERE</p>

  <div class="box" id="box2"></div>
</div>

＆＃13;

Answer 3

我不确定你在寻找什么效果，但这里有你想要如何定位它们的例子：

#mainPage {
  width: 400px;
  height: 165px;
  margin: 10% auto;
}

#mainPage>p {
  text-align: center;
}

.box {
  width: 48px;
  height: 30px;
  background: red;
  position:absolute;
}

#title {
  letter-spacing: 7px;
  font-size: 30px;
  margin-bottom: 30px;
}

#box1 {
  animation: moveBox1 5s infinite;
}

#box2 {
  animation: moveBox2 5s infinite;
}

@keyframes moveBox1 {
  from {
    left:170px;
    top:30px;
  }
  25% {
    left:500px;
    top:30px;
  }
  50% {
    left:500px;
    top:135px;
  }
  75% {
    left:170px;
    top:135px;
  }
  to {
    left:170px;
    top:30px;
  }
}

@keyframes moveBox2 {
  from {
    left:500px;
    top:30px;
  }
  25% {
    left:500px;
    top:135px;
  }
  50% {
    left:170px;
    top:135px;
  }
  75% {
    left:170px;
    top:30px;
  }
  to {
    left:500px;
    top:30px;
  }
}

<div id="mainPage">
  <div class="box" id="box1"></div>

  <p id="title">TITLE HERE</p>

  <div class="box" id="box2"></div>
</div>

Answer 4

<!DOCTYPE html>
<html>
  <head>
    <style> 
      .div1 {
        width: 100px;
        height: 100px;
        background: red;
        position: relative;
        -webkit-animation: myfirst 5s infinite; /* Safari 4.0 - 8.0 */
        animation: myfirst 5s infinite;;
      }
      .div2 {
        width: 100px;
        height: 100px;
        background: red;
        position: relative;
       -webkit-animation: myfirst 5s infinite; /* Safari 4.0 - 8.0 */
       animation: mysecond 5s infinite;;
     }

    /* Safari 4.0 - 8.0 */
     @-webkit-keyframes myfirst {
     0%   { left: 0px; top: 0px;}
     25%  { left: 400px; top: 0px;}
     50%  { left: 400px; top: 400px;}
     75%  { left: 0px; top: 400px;}
     100% { left: 0px; top: 0px;}
     }
    /* Safari 4.0 - 8.0 */
    @-webkit-keyframes mysecond {
    0%   { left: 400px; top: 200px;}
    25%  { left: 0px; top: 0px;}
    50%  { left: 0px; top: -100px;}
    75%  { left: 400px; top: -100px;}
    100% { left: 400px; top: 200px;}
    }

   @keyframes myfirst {
   0%   { left: 0px; top: 0px;}
   25%  { left: 400px; top: 0px;}
   50%  { left: 400px; top: 400px;}
   75%  { left: 0px; top: 400px;}
   100% { left: 0px; top: 0px;}
   }
   @keyframes mysecond {
   0%   { left: 400px; top: 200px;}
   25%  { left: 0px; top: 200px;}
   50%  { left: 0px; top: -100px;}
   75%  { left: 400px; top: -100px;}
   100% { left: 400px; top: 200px;}
   }
</style>
</head>
<body>
  <div class="div1"></div>
  <div class="div2"></div>
</body>

使用CSS顺时针移动对象周围的元素

4 个答案: