时间戳

首页 > 解决方案 > 如何在 CSS 中为背景图像设置动画？

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

问题描述

我有这个动画：

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

我想在背景图像上插入这个动画。这个怎么做？谢谢你。

标签： htmlcsscss-animations

解决方案

看看这种方法是否适合你：
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 ;)

希望这可以帮助！

推荐阅读