我有一个 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;}
}
最佳答案
您可以只为 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>关于html - 图像离开屏幕然后重新打开的动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56650172/