美文网首页
css操作,简单的海浪

css操作,简单的海浪

作者: 白菜_37e2 | 来源:发表于2019-08-13 11:05 被阅读0次

实现思路:

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


利用::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>

相关文章

  • css操作,简单的海浪

    实现思路: 用一个铺满蓝色的背景的盒子, 利用::before与after画2个圆角值不同的不规则圆形(其中一个设...

  • No.33 jQuery样式操作

    一、操作 css 方法 jQuery 可以使用 css 方法来修改简单元素样式; 也可以操作类,修改多个样式。 参...

  • vue中文本域限制字数的方法

    用watch来监听,实现操作也比较简单 HTML JS CSS

  • jQuery元素的操作

    样式操作样式的设置 css方法操作的是元素的行内样式//css方法// $('#test').css('backg...

  • 五、jQuery操作css、位置属性和尺寸属性

    jQuery操作css属性jQuery操作位置属性jQuery操作尺寸属性 1. jQuery操作css属性 逐个...

  • jQuery-02

    1 css操作 2 class操作 3. 三组简单动画 4. 自定义动画 5. 动画队列 6. 节点操作 7. h...

  • DOM—CSS 操作

    HTML元素的style属性 操作 CSS 样式最简单的方法,就是使用网页元素节点的getAttribute方法、...

  • 使用JS操作CSS

    HTML 元素的 style 属性 操作 CSS 样式最简单的方法,就是使用网页元素节点的getAttribute...

  • JavaScript初级入门练习

    一.全选操作在我们日常上网中,经常会接触到全选操作.本文中通过HTML,CSS,JavaScrpit进行一个简单的...

  • js和css简单操作总结

    返回上一页: 返回上一页 function goBack(){window.history.go(-1) ...

网友评论

      本文标题:css操作,简单的海浪

      本文链接:https://www.haomeiwen.com/subject/aglvjctx.html