时间戳

首页 > 解决方案 > 图像移出屏幕然后重新打开的动画

html - 图像移出屏幕然后重新打开的动画

问题描述

我有一个标志的 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;}

}

标签： htmlcss

解决方案

您可以只对 HTML 使用 marquee 标记。

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

推荐阅读