41.动画效果(水波纹)

最新推荐文章于 2022-08-25 21:48:16 发布

越努力，越幸运..........

最新推荐文章于 2022-08-25 21:48:16 发布

阅读量443

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_47254130/article/details/121331436

版权

CSS动画水波纹效果 CSS3 关键帧动画网页特效

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

27 篇文章

订阅专栏

1.水波纹动画
在这里插入图片描述
2.实现代码

<template>
  <div>
    <div class="water-wave">
      <div class="water-wave1"></div>
      <div class="water-wave2"></div>
      <div class="water-wave3"></div>
    </div>
  </div>
</template>
<style lang='scss' scoped>
.water-wave {
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid silver;
  text-align: center;
  line-height: 50px;
  animation: water-waves linear infinite;
  .water-wave1 {
    position: absolute;
    top: 40%;
    left: -25%;
    background: #0eaffe;
    opacity: 0.3;
    width: 200%;
    height: 200%;
    border-radius: 35%;
    animation: inherit;
    animation-duration: 6s;
  }
  .water-wave2 {
    position: absolute;
    top: 45%;
    left: -35%;
    background: #0eaffe;
    opacity: 0.4;
    width: 200%;
    height: 200%;
    border-radius: 35%;
    animation: inherit;
    animation-duration: 7s;
  }
  .water-wave3 {
    position: absolute;
    top: 50%;
    left: -35%;
    background: #0eaffe;
    opacity: 0.5;
    width: 200%;
    height: 200%;
    border-radius: 35%;
    animation: inherit;
    animation-duration: 8s;
  }
}
@keyframes water-waves {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>