下面是我的代码。 我在页面加载时对图像实施了波浪状效果,但无法解决我的其他问题。

问题- 我想每 3 秒更改一次图像并在图像加载时添加类似波浪的动画。 我有三个图像,想在它们之间无限循环。

链接 - https://codepen.io/354erytu/pen/OJVNYKQ

 .wave { position: absolute; top: calc((100% - 30px)/2); left: calc((100% - 30px)/2); width: 30px; height: 30px; background: url('https://c4.wallpaperflare.com/wallpaper/755/29/195/chun-lo-tiger-japanese-art-samurai-demon-hd-wallpaper-thumb.jpg'); background-attachment: fixed; background-position: center center; } .wave0 { z-index: 2; background-size: auto 106%; animation: w 1s forwards; } .wave1 { z-index: 3; background-size: auto 102%; animation: w 1s .2s forwards; } .wave2 { z-index: 4; background-size: auto 104%; animation: w 1s .4s forwards; } .wave3 { z-index: 5; background-size: auto 101%; animation: w 1s .5s forwards; } .wave4 { z-index: 6; background-size: auto 102%; animation: w 1s .8s forwards; } .wave5 { z-index: 7; background-size: auto 100%; animation: w 1s 1s forwards; } @keyframes w { 0% { top: calc((100% - 30px)/2); left: calc((100% - 30px)/2); width: 30px; height: 30px; } 100% { top: calc((100% - 300px)/2); left: calc((100% - 300px)/2); width: 300px; height: 300px; } }
 <div class="wave wave5"></div> <div class="wave wave4"></div> <div class="wave wave3"></div> <div class="wave wave2"></div> <div class="wave wave1"></div> <div class="wave wave0"></div>

#1楼 票数:1

您的关键帧语法应该完全像这样,没有 0% 和 100%,并尝试复制并修改它,因为如果您更改了荣誉和括号的设置方式,它将不起作用。 您可以添加或删除任意数量的属性以设置动画:

@keyframes walk-east{from{background-position:0px 0px;}
to{background-position:1764px 0px;}
}

它应该像那样工作,以前从未见过在荣誉之外有 0% 和 100% 的情况,但它总是在没有这些的情况下工作。 除非您将括号向左或向右移动一个空格以使其看起来更干净,否则它将不再起作用。 它非常坚持括号和荣誉的位置。 由于某些原因,如果不复制已经完成的工作,我就无法做到这一点......

#2楼 票数:0

在这种情况下,当您想要每 3 秒更改一次图像时,CSS 是不够的。 可以使用 CSS 精灵,但是,您使用的是图像链接,因此该选项将消失。 如果我是你,我会选择 JS 解决方案,因为它相当简单。 您可以在此线程中阅读更多如何通过 JS 实现它 - 如何每 X 秒更改一次背景图像?

  ask by Anupam kushwaha translate from so

未解决问题?本站智能推荐:

1回复

CSS动画:无限循环更改图像

我正在尝试使动画类似于页面右上角的https://cardsagainsthumanity.com/ 。 尽管很难做到这一点(如果您确切知道如何做到这一点,请让我知道),但是我决定对此做一个简化的版本。 我使用以下代码在CSS设计中制作了黑白卡片以及zoomIn效果(按底部的“运行代码段”
4回复

仅使用CSS更改图像。

我有类似的东西 我想只使用CSS替换图像。 这可能吗? 这是Javascript解决方案。 这是一个可能的CSS解决方案 问题是CSS应该仅在“ OnlyThisONE” href下而不是对所有IMG进行IMG。 仅使用CSS可以做到这一点吗?
3回复

使用CSS更改图像的大小

这个问题已经在这里有了答案: 使用CSS按比例调整图像大小? [重复] 18个答案 是否可以使用CSS更改图像大小? 我当时想使用缩略图,但是有问题...但是后来我想到,是否可以使用CSS更改图像的大小? 例如 我试过了,但是行不通....有人知道为什么吗? 在这
3回复

更改图像srcjQuery动画

我正在使用JS更改鼠标悬停时的图像,并想为其添加淡入淡出的动画。 我尝试添加.fadeToggle(),但是没有任何正常工作。 $("document").ready(function(){ $(".logo_container").mouseenter(function(){ $("
1回复

用动画方向更改图像

我有两张牛的照片。 我想展示它从左到右和从右到左行走。 目前,我在两个状态下都使用一个图像,我想使用两个图像,其中,当向左行走时母牛朝左,向右行走时母牛朝右。 我该如何实现?
3回复

如何在CSS变量中使用CSS变量来更改图像?

我正在对http://codepen.io/wesbos/pen/adQjoY进行一次小更新,并希望使用CSS变量来更改图像,以查看是否可以这样做。 到目前为止,它不起作用。 并且我有一些在<script> ... </script>实现的If,Then,Else来
3回复

使用CSS逐渐更改图像(擦除过渡)

我有一个奇怪的问题。 这很奇怪,因为我很难解释我的意思。 我意识到,我可以得到一些负面反馈,但没有其他地方可以问。 我正在寻找的是CSS中的一种技术(或者如果不可能,那么也是JavaScript),以便在悬停时逐渐改变图像。 我不希望它一下子淡出或改变整个图像。 我想要的是拥有一个图
1回复

使用jQuery和CSS更改图像或卡片的反面

真的不确定如何最好地表述主题,所以这就是我的意思。 我设置了两个图像,好像它们是在纸牌的相对侧。 当您单击正面时,卡旋转,然后降落在背面。 当您单击背面时,卡旋转并降落在正面。 卡旋转时,您可以同时看到背面和正面的图像。 很棒! 我无法在jsfiddle中使用它,但这是Codepe