如何使用css实现海浪动效

发布时间:2022-03-01 09:44:59 作者:小新
来源:亿速云 阅读:295

这篇文章主要介绍了如何使用css实现海浪动效,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

  代码

  html

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

  scss

  // 简单的盒子

  .wave {

  position: relative;

  width: 150px;

  height: 150px;

  background-color: #5291e0;

  overflow: hidden;

  // 两个不规则圆形(相对盒子进行定位,距离底部距离则为波浪高度)

  &::before,

  &::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的参数来区分)

  &::before {

  bottom: 10%;

  opacity: .5;

  border-radius: 47%;

  }

  }

  }

  // 旋转动画

  @keyframes rotate {

  from {

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

  }

  to {

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

  }

  }

感谢你能够认真阅读完这篇文章,希望小编分享的“如何使用css实现海浪动效”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

推荐阅读:
  1. 使用css实现图片滑动效果的方法
  2. css如何实现虚线边框滚动效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:linux如何查看有哪些用户组

下一篇:Python的format怎么使用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》