Question

我有一个要动画显示的标记的png文件，它要移动到右侧，离开屏幕，然后从左侧返回屏幕。 CSS中是否有某些功能可用于此特定目的？还是我必须对设计有创意？

我已经使用关键帧动画从左向右移动图像，所以我可以了解更多有关动画如何在CSS中工作的信息，但我仍在努力。

<head>
    <link rel="stylesheet" href="Ufatrue.css">
    <title>Bashkorostan</title>
</head> 

  <body bgcolor="#E1E4E6"> 


      <div id="Top">
      <img src="Top.png" alt="7 Flags" align="middle">
          </div>

        <div id="Title">
    <h>Volga Federal District News</h>
    </div>

#Top {
    position: relative;
    animation: myanimation;
    animation-duration: 8s;
    animation-iteration-count: infinite;

}
@keyframes myanimation {
    0% {left: -300px; top: 0px;}
    25% {left: -300px; top: 0px;}
    50% {left: 300px; top: 0px;}
    75% {right: -300px; top: 0px;}
    100% {right: 300px; top: 0px;}

}

Answer 1

我不确定我确切了解您想要什么。但是请看下面的代码片段，请在下面的评论部分中发表评论，告诉我这是否是您想要的

.wrapper {
  overflow: hidden;
}

#top {
  position: relative;
  animation: myanimation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
  height: 100px;
  width: 100px;
  background: red;
}

@keyframes myanimation {
  0% {
    left: 0;
    transform: translateX(-100%)
  }
  100% {
    left: 100%;
    transform: translateX(100%)
  }
}

<div class="wrapper">
  <div id="top">

  </div>
</div>

Answer 2

您可以仅将选取框标记用于HTML。

.box{
  width:10em;
  height:10em;
  background:dodgerblue;
}

<marquee behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()" direction="right" scrollamount="50" scrolldelay="1"><div class="box"></div></maruquee>

Answer 3

这怎么办？：https://jsfiddle.net/wwWaldi/tadyh6p9/14/

#Top {
    width: 30px;
    height: 30px;
    background: blue;
    position: relative;
    animation: myanimation;
    animation-duration: 8s;
    animation-iteration-count: infinite;
}

@keyframes myanimation {
    0% { right: 0; }
    25% { right: -120%; }
    85% { visibility: hidden; }
    90% {
        left: -20%;
        visibility: visible;
    }
    100% {
      left: 0;
      }
}

从屏幕移开然后重新打开的图像动画

3 个答案: