效果图

什么也不说了，上代码。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>css3 水纹效果</title>
  5.     <style type="text/css">
  6.         .point_area {
  7.             text-align: center;
  8.             position: relative;
  9.             width: 150px;
  10.             height: 150px;
  11.             transition: opacity .5s ease-out;
  12.         }
  13.         .point_area .point {
  14.             position: absolute;
  15.             top: 0;
  16.             left: 0;
  17.             right: 0;
  18.             bottom: 0;
  19.             width: 10px;
  20.             height: 10px;
  21.             margin: auto;
  22.             -webkit-border-radius: 50%;
  23.             -webkit-background-clip: padding-box;
  24.             -moz-border-radius: 50%;
  25.             -moz-background-clip: padding;
  26.             border-radius: 50%;
  27.             background-clip: padding-box;
  28.             background: transparent;
  29.         }
  30.         .point_area .point_dot {
  31.             z-index: 1;
  32.             background-color: #ff903d;
  33.             border: 1px solid rgba(255,144,61,.37);
  34.         }
  35.         .point_area .point_10 {
  36.             width: 100%;
  37.             height: 100%;
  38.         }
  39.         .point_area .point_10:after {
  40.             content: "";
  41.             display: block;
  42.             position: absolute;
  43.             top: 0;
  44.             right: 0;
  45.             bottom: 0;
  46.             left: 0;
  47.             border-radius: 50%;
  48.             border: 2px solid #ff903d;
  49.             opacity: 0;
  50.             -webkit-animation: ripple 4.5s ease-out 225ms infinite;
  51.             animation: ripple 4.5s ease-out 225ms infinite;
  52.         }
  53.         .point_area .point_40 {
  54.             width: 100%;
  55.             height: 100%;
  56.         }
  57.         .point_area .point_40:after {
  58.             content: "";
  59.             display: block;
  60.             position: absolute;
  61.             top: 0;
  62.             right: 0;
  63.             bottom: 0;
  64.             left: 0;
  65.             border-radius: 50%;
  66.             border: 2px solid #ff903d;
  67.             opacity: 0;
  68.             -webkit-animation: ripple 4.5s ease-out .9s infinite;
  69.             animation: ripple 4.5s ease-out .9s infinite;
  70.         }
  71.         .point_area .point_80 {
  72.             width: 100%;
  73.             height: 100%;
  74.         }
  75.         .point_area .point_80:after {
  76.             content: "";
  77.             display: block;
  78.             position: absolute;
  79.             top: 0;
  80.             right: 0;
  81.             bottom: 0;
  82.             left: 0;
  83.             border-radius: 50%;
  84.             border: 2px solid #ff903d;
  85.             opacity: 0;
  86.             -webkit-animation: ripple 4.5s ease-out 1.8s infinite;
  87.             animation: ripple 4.5s ease-out 1.8s infinite;
  88.         }
  89.         @-webkit-keyframes ripple{
  90.             0%{
  91.                 opacity:0;-webkit-transform:scale(.1)
  92.             }
  93.             5%{
  94.                 opacity:1
  95.             }
  96.             to{
  97.                 opacity:0;
  98.                 -webkit-transform:scale(1)
  99.             }
  100.         }
  101.         @keyframes ripple{
  102.             0%{
  103.                 opacity:0;
  104.                 -webkit-transform:scale(.1);
  105.                 transform:scale(.1)
  106.             }
  107.             5%{
  108.                 opacity:1
  109.             }
  110.             to{
  111.                 opacity:0;
  112.                 -webkit-transform:scale(1);
  113.                 transform:scale(1)
  114.             }
  115.         }
  116.     </style>
  117. </head>
  118. <body style="position: relative;">
  119.     <div class="point_area" style="top: 158px; left: 661px; position: absolute; width: 110px; height: 110px; visibility: visible; opacity: 1;">
  120.         <p class="point_name" style="position: absolute; top: 45px; left: 65px;">北京</p>
  121.         <a href="#" target="_blank" class="point point_dot"></a>
  122.         <div class="point point_10"></div>
  123.         <div class="point point_40"></div>
  124.         <div class="point point_shadow point_80"></div>
  125.     </div>
  126. </body>
  127. </html>

css3 水纹效果（仿写阿里云）的更多相关文章

  1. 阿里云服务器云数据库免费体验（Java Web详细实例）

    一.效果展示 博主部署了两个war包到阿里云服务器上,一个是没有连接数据库的,另外一个是连接了数据库的. (由于阿里云服务器免费使用15天,下面链接约2016年3月9日后无效) (1)无数据库版访问地 ...

  2. Python3.6+nginx+uwsgi部署Django程序到阿里云Ubuntu16.04系统

    Python3.6+nginx+uwsgi部署Django程序到阿里云Ubuntu16.04系统 这个是写好的Django程序在本地机运行的情况,一个查询接口. 准备工作 1.首先购买一台阿里云的EC ...

  3. 阿里云POLARDB如何帮助百胜软件应对数据库的“巅峰时刻”

    POLARDB是阿里云自研的下一代关系型云数据库,100%兼容MySQL,存储容量最高可达100TB,性能最高提升至MySQL的6倍,适用于企业多样化的数据库应用场景.POLARDB采用存储和计算分离 ...

  4. Linux下配置yum源为阿里云或网易的详解

    一.yum源概述 yum需要一个yum库,也就是yum源.默认情况下,CentOS就有一个yum源.在/etc/yum.repos.d/目录下有一些默认的配置文件(可以将这些文件移到/opt下,或者直 ...

  5. 阿里云的重大战略调整，“被集成”成核心，发布SaaS加速器助力企业成长

    摘要: 阿里云战略调整,“被集成”成为生态战略,讲讲即将“退居幕后”的阿里云. 阿里云近期调整动作巨大,阿里云新任总裁张剑锋(花名,行颠)上任后充分体现其创新和自我探索不断求“变”的阿里特性.期间,达 ...

  6. 阿里云SLB的健康检查配置

    若阿里云SLB健康检查异常,则默认SLB无法访问到后端ECS,也就意味着通过SLB访问后端ECS上部署的服务会报502 gateway. 另一种办法是关闭健康检查(不推荐) 简要说明: SLB通过配置 ...

  7. jQuery仿阿里云购买选择购买时间长度

    效果:http://hovertree.com/texiao/jquery/61/ jQuery仿阿里云购买服务器选择时间长度,操作简单,只需点击所要选的时间段 代码: <!doctype ht ...

  8. 仿写Windows7桌面和任务栏 HTML5+CSS3+Jquery实现

    过去一段时间零零散散的自学了一点点jquery的相关用法,基本上属于用到哪个了,就去查然后就学一点,没有系统的学过,深入的用法也不是特别了解,毕竟javascript基础就比较薄弱.经过一段时间的零敲 ...

  9. 基于纯 CSS3 技术实现美观的标签云效果

    标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...

随机推荐

  1. python网络爬虫（9）构建基础爬虫思路

    目的意义 基础爬虫分5个模块,使用多个文件相互配合,实现一个相对完善的数据爬取方案,便于以后更完善的爬虫做准备. 这里目的是爬取200条百度百科信息,并生成一个html文件,存储爬取的站点,词条,解释 ...

  2. java不同包中protected修饰的属性和方法调用方法

    protected修饰的静态属性和方法的调用方式1:直接类名调用 2:实例化父类对象进行调用 3:实例化子类对象进行调用 protected修饰的非静态属性和方法的调用方式:1:实例化子类对象进行调用 ...

  3. C# 面向对象4 构造函数

    构造函数 1.构造函数用来创建对象,并且可以在构造函数中对对象进行初始化. (给对象的每个属性依次的赋值) 2.构造函数是用来创建对象的特殊方法: 1.方法名和类名一样. 2.没有返回值,连void都 ...

  4. opencv中的高维矩阵Mat

    本示例程序主要是通过实例演示高维Mat的寻址方式. //3,4分别表示行数.列数,所以3*4是一个页面的元素数,2表示有2个3*4 ,b=,c=; int size[]={a,b,c}; float* ...

  5. 浏览器进程线程时间循环、与vue netTick的实现原理

    浏览器事件循环(结合vue nextTick)https://juejin.im/post/5cb736c5f265da039955d4e8#comment messageChanel的讲解https ...

  6. 用原生js来写一个swiper滑块插件

        是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...

  7. SuperMap-WebGL-坐标系及转换说明

    转载自:https://blog.csdn.net/supermapsupport/article/details/89519310 一.坐标系介绍我们先来列举下Cesium中的坐标系:WGS84经纬 ...

  8. oracle服务端字符集

    一.oracle服务端字符集 SQL> select userenv('language') from dual ; USERENV('LANGUAGE')------------------- ...

  9. 使用GDB和GEF进行调试

    使用GDB进行调试 这是编译ARM二进制文件和使用GDB进行基本调试的简单介绍.在您按照教程进行操作时,您可能需要按照自己的习惯使用ARM程序集.在这种情况下,你要么需要一个备用的ARM设备,或者你只 ...

  10. maven中配置jboss仓库

    有两种方式,一种是在项目的pom.xml中<repositories>中添加,这是配置是针对具体的某一个项目,更多时候,我们想把jboss仓库作为所有项目的仓库,这就需要在maven的se ...