代码之家 › 专栏 › 技术社区 › Eduardo João

CSS图像水下效果

keyframe transform animation image css

0

Eduardo João · 技术社区 · 8 年前

因此,我目前正在尝试使用Css关键帧在一些图像上实现类似水下的效果。我正在使用“transform:skew”来实现这一点,但结果不是很好,看起来一点都不有机。我希望这些图像以流动的方式移动和扭曲,就像它们在水下一样。

我的Css:

 @keyframes imgevento{
        0%, 100% {
            transform: skew(0deg, 0deg);

        }
        50% { transform: skew(2deg, 2deg);

        }
    }

    .imgevento{
        transform-origin:50% 50%;
        animation:imgevento 6s linear alternate infinite;
}

我是否可以通过css实现我想要的结果?

1 回复 | 直到 8 年前

1

7

Brett DeWoody 8 年前

我认为一个关键是将扭曲的元素放入容器元素并隐藏溢出,以创建更真实的视野。

除了 skew ,一些附加的过滤器、变换和潜在的CSS渐变可以应用于一些伪元素,以创建一些“光”效果。

效果也可能取决于所使用的图像,以增强或渲染图像的特定元素,如光线等。

这只是一个开始,使用容器裁剪视图 saturate 和 invert 过滤器。最佳全屏查看,以获取 沉浸式 经验

html,
body {
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  max-width: 570px;
}

.imgevento-container {
  overflow: hidden;
}

.imgevento {
  transform-origin: center center;
  animation: imgevento 6s ease-in-out alternate infinite;
}

@keyframes imgevento {
  0%,
  100% {
    transform: skew(0deg, 0deg) scale(1.35, 1.35);
    filter: saturate(100%) invert(0%);
  }
  
  25% {
    filter: saturate(180%) invert(10%);
  }
  
  50% {
    transform: skew(2deg, 2deg) scale(1.35, 1.35);
    filter: saturate(100%) invert(0%);
  }
  
  75% {
    filter: saturate(150%) invert(20%);
  }
}

<div class="imgevento-container">
  <img class="imgevento" src="https://i.imgur.com/fypMB4q.jpg" />
</div>