css操作,简单的海浪

html-css020

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>

cs起源这样换手套,需要把每个枪的模型都修改,然后把手套的贴图复制到枪的贴图里面。之后修改路径,不然全是黑粉格子。《反恐精英:起源》(Counter-Strike:Source,简称为CS:S或CSS)是由ValveSoftware研发的一款第一人称射击游戏,于2004年8月11日正式发行。