Question

我有这个动画：

@keyframes floating {
  from { transform: translate(0,  0px); }
  65%  { transform: translate(0, 15px); }
  to   { transform: translate(0, -0px); }    
}

，我想在背景图像上插入此动画。这该怎么做？谢谢。

Answer 1

看看这种方法是否适合您：
https://codepen.io/panchroma/pen/RYbGwB

这个想法是你：

（1）设置您要使用的元素position:relative; overflow:hidden;的样式，然后
（2）将动画应用于绝对定位的伪元素.element:before{...}

HTML

<div class="element"></div>

CSS

.element{
  position: relative;
  overflow:hidden;
  width: 600px;
  height: 400px;
}

.element:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 600px;
  height: 400px;
  animation: floating 5s infinite;
  z-index: -1;
 background-image:url(https://github.com/bradleyflood/tool-sample-testing-images/raw/master/jpg-beach-1020x670-160kb.jpg)
}


@keyframes floating {
  from { transform: translate(0,  0px); }
  65%  { transform: translate(0, 15px); }
  to   { transform: translate(0, -0px); }    
}

我想赞扬这个主意，尽管它来自Craig Buckler；）

希望这会有所帮助！

如何在CSS中为背景图像设置动画？

1 个答案: