CSS实现水波纹效果示例

已于 2022-06-07 14:54:41 修改
阅读量1.2k 收藏 6
点赞数
于 2022-06-07 14:54:12 首次发布
原文链接：https://blog.csdn.net/zzzz121380/article/details/122857709?spm=1001.2014.3001.5502
版权

CSS实现水波纹效果 水波 css

CSS实现水波纹效果
记录如下以供以后使用

效果图如下
方法一：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <style>
      .app {
        width: 100%;
        height: 800px;
        background-color: #262c50;
        position: relative;
        overflow: hidden;
      
     }
      .china-map{width:1000px;height:620px;background:url('./map_black_bg.png') center no-repeat;position:relative;margin: 0 auto;}
      .region-list{position:relative;left:0;top:0}
    
      @-webkit-keyframes warn{
      0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}
      100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}
      }
      @-moz-keyframes warn{
      0%{-moz-transform:scale(0);transform:scale(0);opacity:1}
      100%{-moz-transform:scale(1);transform:scale(1);opacity:0}
      }
      @-o-keyframes warn{
      0%{-o-transform:scale(0);transform:scale(0);opacity:1}
      100%{-o-transform:scale(1);transform:scale(1);opacity:0}
      }
      @keyframes warn{
      0%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0);opacity:1}
      100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);opacity:0}
      }
      .area-box .dot{position:absolute;left:0;width:10px;height:10px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;background:#a2a9b4;opacity:1;filter:alpha(opacity=100)}
      .area-box .pulse{position:absolute;top:-28px;left:-28px;height:66px;width:66px;border:2px solid #b7b7b7;-webkit-border-radius:48px;-moz-border-radius:48px;border-radius:48px;-webkit-box-shadow:0 0 4px #82878f,0 0 10px #82878f inset;-moz-box-shadow:0 0 4px #82878f,0 0 10px #82878f inset;box-shadow:0 0 4px #82878f,0 0 10px #82878f inset;opacity:.12;filter:alpha(opacity=0);-webkit-animation:warn 2s ease-out both;-moz-animation:warn 2s ease-out both;-o-animation:warn 2s ease-out both;animation:warn 2s ease-out both;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;-o-animation-iteration-count:infinite;animation-iteration-count:infinite;background:0 0}
      .area-box .delay-01{-webkit-animation-delay:0;-moz-animation-delay:0;-o-animation-delay:0;animation-delay:0}
      .area-box .delay-02{-webkit-animation-delay:.4s;-moz-animation-delay:.4s;-o-animation-delay:.4s;animation-delay:.4s}
      .area-box .delay-03{-webkit-animation-delay:.8s;-moz-animation-delay:.8s;-o-animation-delay:.8s;animation-delay:.8s}
      .area-box .delay-04{-webkit-animation-delay:1.2s;-moz-animation-delay:1.2s;-o-animation-delay:1.2s;animation-delay:1.2s}
      .area-box .delay-05{-webkit-animation-delay:1.6s;-moz-animation-delay:1.6s;-o-animation-delay:1.6s;animation-delay:1.6s}
      .area-box .delay-06{-webkit-animation-delay:2s;-moz-animation-delay:2s;-o-animation-delay:2s;animation-delay:2s}
      .area-box .delay-07{-webkit-animation-delay:2.4s;-moz-animation-delay:2.4s;-o-animation-delay:2.4s;animation-delay:2.4s}
      .area-box .delay-08{-webkit-animation-delay:-.4s;-moz-animation-delay:-.4s;-o-animation-delay:-.4s;animation-delay:-.4s}
      .area-box .delay-09{-webkit-animation-delay:-.8s;-moz-animation-delay:-.8s;-o-animation-delay:-.8s;animation-delay:-.8s}
      .area-box .delay-10{-webkit-animation-delay:-1.2s;-moz-animation-delay:-1.2s;-o-animation-delay:-1.2s;animation-delay:-1.2s}
      .area-box .delay-11{-webkit-animation-delay:4s;-moz-animation-delay:4s;-o-animation-delay:4s;animation-delay:4s}
      .region-list.active .area-box .dot{background:#009fd9}
      .region-list.active .area-box .pulse{border-color:#009fd9;top:-41px;left:-41px;height:88px;width:88px;-webkit-box-shadow:0 0 12px #0080d9,0 0 20px #0080d9 inset;-moz-box-shadow:0 0 12px #0080d9,0 0 20px #0080d9 inset;box-shadow:0 0 12px #0080d9,0 0 20px #0080d9 inset}
      .region-list.waite .area-box .dot{background:#f90}
      .region-list.waite .area-box .pulse{border-color:#f90;top:-41px;left:-41px;height:88px;width:88px;-webkit-box-shadow:0 0 12px #f90,0 0 20px #f90 inset;-moz-box-shadow:0 0 12px #f90,0 0 20px #f90 inset;box-shadow:0 0 12px #f90,0 0 20px #f90 inset}
      .show-regin{position:absolute;left:2px;height:0;top:0;width:11px;opacity:0;-o-transition:all .5s ease-in-out;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;transition:all .5s ease-in-out}
      .online-node .show-regin,.region-list:hover .show-regin,.underline-node .show-regin,.waite-node .show-regin{height:127px;opacity:1}
      .show-regin span{width:80px;position:absolute;left:8px;top:-11px;padding:6px 10px;font-size:14px;color:#ccc;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;text-align:center;white-space:nowrap;}
      .postition-10 .show-regin span{left:0}
      .postition-6 .show-regin span{left:-72px}
      .area-box{z-index:77}
      .show-regin{z-index:66}
      .region-list.active .show-regin span{position:relative;color:#ccc}
      .region-list.waite .show-regin span{position:relative;color:#ccc}
      .postition-4{left:68%;top:38%}
      .postition-4.region-list.active .area-box .pulse{top:-50px;left:-50px;width:110px;height:110px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}
      .postition-7.region-list.active .area-box .pulse{top:-50px;left:-50px;width:110px;height:110px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}
      .postition-8{left:66%;top:84%}
      .postition-9{left:77%;top:61%}
      .postition-11{left:70%;top:48%}
      .solution-header-1 {
          max-width: 1210px;
          margin-left: auto;
          margin-right: auto;
          text-align: center;
      }
      .solution-header-1 h2 {
          margin-bottom: 10px;
          font-size: 36px;
          line-height: 46px;
          text-align: center;
          color: #FAFBFE;
          font-weight: inherit;
      }
      .solution-header-1 p {
          font-size: 18px;
          line-height: 22px;
          text-align: center;
          color: #FFFFFF;
          opacity: 0.6;
      }
     
      @-webkit-keyframes bgScroll {
          from {
              -webkit-transform: translateY(0);
              transform: translateY(0)
          }
      
          to {
              -webkit-transform: translateY(-33.333%);
              transform: translateY(-33.333%)
          }
      }
      @keyframes bgScroll {
          from {
              -webkit-transform: translateY(0);
              transform: translateY(0)
          }
          to {
              -webkit-transform: translateY(-33.333%);
              transform: translateY(-33.333%)
          }
      }
      </style> 
</head>
<body>
  <div class="app">

        <div class="solution-header-1" >
          <h2>纯CSS实现水波纹效果</h2>
            <p>纯CSS实现水波纹效果</p>
        </div>
   

      <div style="text-align: center">
        <div class="china-map">
          <div class="region-list waite postition-4 waite-node">
            <div class="area-box">
              <span class="dot"></span>
              <span class="pulse delay-01"></span>
              <span class="pulse delay-02"></span>
              <span class="pulse delay-03"></span>
            </div>
            <div class="show-regin">
              <span>北京</span>
            </div>
          </div>
          <div class="region-list  active  postition-11 online-node">
            <div class="area-box">
              <span class="dot"></span>
              <span class="pulse delay-06"></span>
              <span class="pulse delay-05"></span>
              <span class="pulse delay-04"></span>
            </div>
            <div class="show-regin">
              <span>山东</span>
            </div>
          </div>
          <div class="region-list active postition-8 online-node">
            <div class="area-box">
              <span class="dot"></span>
              <span class="pulse delay-06"></span>
              <span class="pulse delay-05"></span>
              <span class="pulse delay-04"></span>
            </div>
            <div class="show-regin">
              <span>广州</span>
            </div>
          </div>
          <div class="region-list active postition-9 online-node">
            <div class="area-box">
              <span class="dot"></span>
              <span class="pulse delay-06"></span>
              <span class="pulse delay-05"></span>
              <span class="pulse delay-04"></span>
            </div>
            <div class="show-regin">
              <span>上海</span>
            </div>
          </div>
        </div>
      </div>
  </div>

</body>
</html>

效果图如下
方法二：
在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>水波纹效果</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }           
            html,
            body {
                height: 100%;
                overflow: hidden;
            }           
            @-webkit-keyframes wateranimate {
                0% {
                    -webkit-transform: scale(0);
                    opacity: 0.5;
                }
                100% {
                    -webkit-transform: scale(2);
                    opacity: 0;
                }
            }
            @keyframes wateranimate {
                0% {
                    -webkit-transform: scale(0);
                    transform: scale(0);
                    opacity: 0.5;
                }
                100% {
                    -webkit-transform: scale(2);
                    transform: scale(2);
                    opacity: 0;
                }
            }           
            .container {
                position: relative;
                width: 500px;
                height: 500px;
                margin: 50px auto;
                border: 1px solid yellow;
            }           
            .water1 {
                -webkit-animation: wateranimate 12s 9s ease-out infinite;
                animation: wateranimate 12s 9s ease-out infinite;
            }           
            .water2 {
                -webkit-animation: wateranimate 12s 6s ease-out infinite;
                animation: wateranimate 12s 6s ease-out infinite;
            }           
            .water3 {
                -webkit-animation: wateranimate 12s 3s ease-out infinite;
                animation: wateranimate 12s 3s ease-out infinite;
            }           
            .water4 {
                -webkit-animation: wateranimate 12s 0s ease-out infinite;
                animation: wateranimate 12s 0s ease-out infinite;
            }           
            .water1, .water2, .water3, .water4 {
                padding: 20%;
                position: absolute;
                left: 30%;
                top: 30%;
                border: 1px solid pink;
                box-shadow: 0 0 120px 30px rgba(235, 31, 137, 1) inset;
                border-radius: 100%;
                z-index: 1;
                opacity: 0;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="water1"></div>
            <div class="water2"></div>
            <div class="water3"></div>
            <div class="water4"></div>
        </div>
    </body>
</html>
知 秋~
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端知识笔记（三十一）———css实现水波纹效果（水球图）
lrx276的博客
12-04 1096
【代码】前端知识笔记（三十一）———css实现水波纹效果（水球图）
使用css 动画实现，水波纹的效果
qq_17335549的博客
07-25 2439
每日鸡汤：每个你想要学习的瞬间都是未来的你向自己求救需求，实现水波纹动画效果，要求中心一个圆点，然后有3个圈，一圈一圈的向里面缩小。说实话我第一个想到了给3个圈设置不同的宽高，然后设置动画0-100%，一次缩小宽高！但是，我转念一想，我是不是也可以用padding设置，就是给每个圈设定一个padding, 逐渐缩小padding, 貌似也能达到相同的效果。确实可以，但是无论用哪种方法，要想让动画变得顺滑。
有趣的css - 水波纹加载动画
最新发布
设计师工作日常
05-15 1206
使用 css 模拟一个丝滑的水波纹加载效果。
css实现水波纹效果
zhanghuaiwei
11-23 2034
css实现水波纹效果
纯css实现水波流动效果
wuliyouMaozhi的博客
08-07 4404
纯css实现水波流动效果：先实现一个装水的容器，可以通过box-shadow给容器增添点厚度的感觉 水的实现，其实就是一个纯色的背景 接下来就是波纹的实现 思考下现有的css属性可以有这样的效果吗？ 答案是否定的，那我们怎样通过dom+css来实现这样的效果呢？ 我们可以看到波纹的行动轨迹是有规律的，再仔细观察后会发现其实每四个小周期是一个循环，每四个小周期之后的动画都是固定的.........
html+css3实现在图片上水波流动效果，可调节水波流速大小
qq_45726323的博客
06-26 675
今天实现利用html5+css3一个在图片上可以展示出水波纹的效果，并且可以调节水波纹流速大小。
CSS实现波动水球效果的示例代码
01-19
今天学习到了一个新的css特效，波动水球效果，也是非常的好看 HTML： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, ...
水波纹效果 jquery html css
07-14
本项目结合了jQuery、HTML和CSS技术，旨在实现一个逼真的水波纹动画效果。下面将详细介绍如何利用这三种技术来创建水波纹效果。 首先，HTML是网页的基础结构，用于定义页面的基本元素和内容布局。在创建水波纹效果...
CSS3实现水波浪浮动特效
06-24
在本文中，我们将深入探讨如何使用CSS3来实现水波浪浮动特效，这是一种在网页设计中增添动态美感的先进技术。CSS3（Cascading Style Sheets Level 3）是CSS的最新版本，它提供了丰富的样式控制功能，包括动画、过渡...
水波纹涟漪效果html css3 jquery
11-29
在网页设计中，实现动态的视觉效果往往能提升用户体验，其中“水波纹涟漪效果”就是一个颇受欢迎的元素。这种效果通常用于按钮点击、鼠标悬停等交互场景，为用户带来更生动、有趣的视觉反馈。本文将详细介绍如何利用...
html5 svg逼真水波纹动画特效
07-28
在提供的压缩包文件"jiaoben7069"中，可能包含了实现这个特效的HTML、SVG和JavaScript代码示例，开发者可以通过分析和修改这些代码来学习和实践水波纹动画的实现。 总之，HTML5和SVG结合TweenMax库可以创造出令人...
使用CSS实现逼真的水波纹点击效果
12-03
这篇文章特别介绍如何使用CSS来完成水波纹的效果。 div的层层叠叠 虽然webkit具有遮罩的能力（webkit mask），不过webkit虽然强大，但在跨浏览器上总是它的罩门，况且在性能上也是往往会造成困扰（这也是为什么chrome要这么吃资源了），因此撇开webkit不谈，我们该用什么方法，才可以做出水波纹的效果呢？答案就是用“叠”的方式，这个水波纹效果的原理其实就是用六个div叠在一起，接着最重要的就是将背景设为固定：background-attachment:fixed；，然后让背景的尺寸有大有小，就可以完成了，只要把六个div叠在一起，搭配CSS的animation，就可以让六个
css3波纹开发动效_简洁版
04-30
css3波纹开发动效，以中间为准向四周发射
纯CSS实现水波纹效果
太空编程
01-04 1605
首先我们从结构和样式两个方面来讲解以上动图的实现过程：Html结构：<div class="square"> <span></span&...
CSS实战 - 波纹扩散效果
热门推荐
Kio的博客
08-19 1万+
纯CSS动画产生圆圈由小变大向外扩散的效果，画面上的圆形呈现出周期性的向四周扩散显示的动画效果，实现了涟漪多层扩散和波动扩散两种效果，是一款比较典型的css动画效果代码
CSS实现水波纹效果
zzzz121380的博客
02-10 1718
CSS实现水波纹效果 记录如下以供以后使用 效果图如下 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-s
【前端】CSS3、Canvas、SVG等5种方式实现水波纹波浪动画特效
zhichaosong的博客
07-06 1万+
欢迎使用Markdown编辑器写博客 本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I...
css实现水波浪效果
刘洪瑞的博客
04-07 2232
在项目中，我们常常想用css做成更美的效果，水波浪图就是最常用的方法。那么我们怎么实现呢？ 别慌，我已经把代码贴出来了。 html部分 <div class="global-page-state"> <div class="installing"> <div class="wave">正在安装</div&gt...
js+css实现点击按钮水波纹
掺乎君的博客
02-15 6409
.ripple-effect { position: relative; overflow: hidden; } .btn { width: 150px; height: 40px; border: 1px solid #d9d9d9; outline: none;
css 实现水波纹效果
07-25
要实现水波纹效果，可以使用CSS的伪元素和动画来实现。下面是一个简单的示例代码： HTML: ```html <div class="ripple"></div> ``` CSS: ```css .ripple-container { position: relative; width: 200px; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值