效果图

什么也不说了，上代码。

<!DOCTYPE html>

<html>

<head>

    <title>css3 水纹效果</title>

    <style type="text/css">

        .point_area {

            text-align: center;

            position: relative;

            width: 150px;

            height: 150px;

            transition: opacity .5s ease-out;

        }

        .point_area .point {

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            width: 10px;

            height: 10px;

            margin: auto;

            -webkit-border-radius: 50%;

            -webkit-background-clip: padding-box;

            -moz-border-radius: 50%;

            -moz-background-clip: padding;

            border-radius: 50%;

            background-clip: padding-box;

            background: transparent;

        }

        .point_area .point_dot {

            z-index: 1;

            background-color: #ff903d;

            border: 1px solid rgba(255,144,61,.37);

        }

        .point_area .point_10 {

            width: 100%;

            height: 100%;

        }

        .point_area .point_10:after {

            content: "";

            display: block;

            position: absolute;

            top: 0;

            right: 0;

            bottom: 0;

            left: 0;

            border-radius: 50%;

            border: 2px solid #ff903d;

            opacity: 0;

            -webkit-animation: ripple 4.5s ease-out 225ms infinite;

            animation: ripple 4.5s ease-out 225ms infinite;

        }

        .point_area .point_40 {

            width: 100%;

            height: 100%;

        }

        .point_area .point_40:after {

            content: "";

            display: block;

            position: absolute;

            top: 0;

            right: 0;

            bottom: 0;

            left: 0;

            border-radius: 50%;

            border: 2px solid #ff903d;

            opacity: 0;

            -webkit-animation: ripple 4.5s ease-out .9s infinite;

            animation: ripple 4.5s ease-out .9s infinite;

        }

        .point_area .point_80 {

            width: 100%;

            height: 100%;

        }

        .point_area .point_80:after {

            content: "";

            display: block;

            position: absolute;

            top: 0;

            right: 0;

            bottom: 0;

            left: 0;

            border-radius: 50%;

            border: 2px solid #ff903d;

            opacity: 0;

            -webkit-animation: ripple 4.5s ease-out 1.8s infinite;

            animation: ripple 4.5s ease-out 1.8s infinite;

        }

        @-webkit-keyframes ripple{

            0%{

                opacity:0;-webkit-transform:scale(.1)

            }

            5%{

                opacity:1

            }

            to{

                opacity:0;

                -webkit-transform:scale(1)

            }

        }

        @keyframes ripple{

            0%{

                opacity:0;

                -webkit-transform:scale(.1);

                transform:scale(.1)

            }

            5%{

                opacity:1

            }

            to{

                opacity:0;

                -webkit-transform:scale(1);

                transform:scale(1)

            }

        }

    </style>

</head>

<body style="position: relative;">

    <div class="point_area" style="top: 158px; left: 661px; position: absolute; width: 110px; height: 110px; visibility: visible; opacity: 1;">

        <p class="point_name" style="position: absolute; top: 45px; left: 65px;">北京</p>

        <a href="#" target="_blank" class="point point_dot"></a>

        <div class="point point_10"></div>

        <div class="point point_40"></div>

        <div class="point point_shadow point_80"></div>

    </div>

</body>

</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. 最小生成树之Prim Kruskal算法（转）

    最小生成树 首先,生成树是建立在无向图中的,对于有向图,则没有生成树的概念,所以接下来讨论的图均默认为无向图.对于一个有n个点的图,最少需要n-1条边使得这n个点联通,由这n-1条边组成的子图则称为原 ...

  2. requests与BeautifulSoup

    requests模块: 1.安装:pip install requests 2.使用request发送get请求: import requests paras = { 'k1':'c1', 'k2': ...

  3. 08 Python之内存管理

    python中的内存管理,从浅层次来说,可以分为3个方面来讲: 1,引用计数: python中引用计数,为了跟踪内存的对象 当创建对象的时候即被引用了,当对象不再被使用时,即某个对象的引用计数为0,它 ...

  4. ansible的基本学习-安装和简单的配置测试

    当下有许多的运维自动化工具(配置管理),例如:ansible.saltstack.puppet.fabric等 ansible 是一种集成it系统的配置管理.应用部署.执行特定任务的开源平台,是ans ...

  5. oracle数据泵expdp和impdp使用

    expdp和impdp优缺点 优点: expdp/impdp命令,我们也通常称之为“数据泵(DataPump)”,它具有以下优点: l 在性能上,具有并行处理能力,因此可以获得性能上的优势,加快导入导 ...

  6. golang time json mongodb 时间处理

    golang 中解决前端time 输出,后端mongodb中时间存储. package mask import ( "fmt" "time" "go. ...

  7. kotlin面向对象之枚举、印章类

    枚举: 由于这个比较简单,直接上代码: 下面使用一下: 印章类[Sealed class]: 听着挺新鲜的,下面以一个具体的场景来对它进行学习: 动物园里有三个动物如下,在天黑时它们污污的在做“游戏” ...

  8. 【小知识】比较 x^y 和 y^x 的大小

    往前翻几个编号相邻的题目翻到了这么一道题,感觉很好奇就做了一下 (upd:我下午问了下出题人做法,他就把题隐藏了……这不太友好啊……所以我补一下题意:) 题意 给你两个整数 $x$ 和 $y$,求 $ ...

  9. 高性能mysql 第10章 复制

    复制功能不仅能够构建高可用的应用,同时也是高可用性,可扩展性,灾难恢复,备份以及数据仓库等工作的基础. mysql支持两种复制方式:基于语句的复制和基于行的复制.基于语句的复制(也成为逻辑复制)是早期 ...

  10. 【The 13th Chinese Northeast Collegiate Programming Contest E题】

    题目大意:给定一棵 N 个点的树,边有边权,定义"线树"为一个图,其中图的顶点是原树中的边,原树中两条有公共端点的边对应在线图中存在一条边,边权为树中两条边的边权和,求线图的最小生 ...