我正在尝试学习HTML和CSS,但是遇到了问题:
<style style="text/css">
div.slide-slow {
width: 100%;
overflow: hidden;
}
div.slide-slow div.inner {
animation: slide-slow 30s;
margin-top: 0%;
}
@keyframes slide-slow {
from {
margin-left: 100%;
}
to {
margin-left: 0%;
}
}
</style>
<div class="slide-slow">
<div class="inner">
<img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish">
</div>
</div>
我希望此CSS循环,而不只是在完成时停止。是否可以使CSS函数循环?
使用animation-iteration-count: infinite
。用数字值限制循环。
<style style="text/css">
div.slide-slow {
width: 100%;
overflow: hidden;
}
div.slide-slow div.inner {
animation: slide-slow 3s;
margin-top: 0%;
animation-iteration-count: infinite;
}
@keyframes slide-slow {
from {
margin-left: 100%;
}
to {
margin-left: 0%;
}
}
</style>
<div class="slide-slow">
<div class="inner">
<img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish">
</div>
</div>
附加:对于Ismael的建议,以翻转效果来回实现动画,可以使用rotateY(180deg)
。与在静态位置翻转相反,最好将鱼旋转,就像随着水流向后移动一样(正常动画)。ease-in-out
可以更好地维护计时功能。我已使用width: 40vw
旋转功能来稍微响应/查看端口,并且不会以太大的偏移旋转。
播放边距和宽度值以获得合适的动画。
<style style="text/css">
* {
margin: 0;
padding: 0;
}
div.slide-slow {
width: 100%;
overflow: hidden;
}
div.slide-slow div.inner {
animation: slide-slow 15s;
margin-top: 0%;
animation-iteration-count: infinite;
animation-delay: 0s;
width: 40vw;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
@keyframes slide-slow {
0% {
margin-left: 85%;
}
25% {
margin-left: 20%;
transform: rotateY(0deg);
}
50% {
margin-left: -25%;
transform: rotateY(180deg);
transform-origin: center center;
}
75% {
margin-left: 50%;
transform: rotateY(180deg);
}
100% {
margin-left: 85%;
transform: rotateY(0deg);
}
}
</style>
<div class="slide-slow">
<div class="inner">
<img src="http://i.stack.imgur.com/nJAsS.gif" alt="Swimming fish">
</div>
</div>
(图片来源:http : //www.html.am/images/html-codes/marquees/fish-swimming.gif)
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句