css操作，简单的海浪

html-css09

css操作，简单的海浪,第1张

实现思路：

用一个铺满蓝色的背景的盒子，

利用：：before与after画2个圆角值不同的不规则圆形（其中一个设置透明度或者其他颜色，以便区分）：

父元素设置overflow:hidden；

最后加上animation 动画让不同规则圆形旋转起来即可:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div class="wave"></div>

</body>

<style>

    /* // 简单的盒子 */

.wave {

  position: relative

  width: 150px

  height: 150px

  background-color: #5291e0

  /* overflow: hidden*/

}

/* // 两个不规则圆形（相对盒子进行定位，距离底部距离则为波浪高度） */

.wave::before,

.wave::after {

    content: ""

    position: absolute

    left: 50%

    bottom: 15%

    width: 500%

    height: 500%

    border-radius: 45%

    background-color: #fff

  transform: translateX(-50%)

    animation: rotate 15s linear infinite

  }

  /* // 其中一个不规则圆形调整一下样式，以便区分（或者调整animation的参数来区分） */

  .wave::before {

    bottom: 10%

    opacity: .5

    border-radius: 47%

}

/* // 旋转动画 */

@keyframes rotate {

  from {

    transform: translateX(-50%) rotateZ(0deg)

  }

  to {

    transform: translateX(-50%) rotateZ(360deg)

  }

}

</style>

</html>

滤镜效果filter的css样式属性是微软Internet Explorer特有的，未被W3C收入，故而在火狐浏览器下尚未提供支持。但是通过js编码可以部分实现一些滤镜效果，如透明等。

随着浏览器的发展CSS的功能越来越强大，大多数的滤镜效果有类似功能的CSS样式实现了。

对应表：

IE 滤镜 　W3C 滤镜

Alpha：设置透明层次. grayscale 灰度

blur：创建高速度移动效果，即模糊效果. sepia 褐色

Chroma：制作专用颜色透明. 　 saturate 饱和度

DropShadow：创建对象的固定影子. hue-rotate 色相旋转

FlipH：创建水平镜像图片. 　invert 反色

FlipV：创建垂直镜像图片.　 opacity 透明度

glow：加光辉在附近对象的边外. brightness 亮度

gray：把图片灰度化.　 contrast 对比度

invert：反色.blur 模糊

light：创建光源在对象上. 　drop-shadow 阴影

mask：创建透明掩膜在对象上.

shadow：创建偏移固定影子.

wave：波纹效果.

Xray：使对象变的像被x光照射一样.