css3 仿写阿里云水纹效果的示例代码


Posted in HTML / CSS onFebruary 10, 2018

本文介绍了css3 仿写阿里云水纹效果的示例代码,分享给大家,具体如下:

效果图

css3 仿写阿里云水纹效果的示例代码

什么也不说了,上代码。

<!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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 HTML / CSS
非常震撼的纯CSS3人物行走动画
Feb 24 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 HTML / CSS
HTML5语音识别标签写法附图
Nov 18 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
Sep 11 HTML / CSS
HTML5 Canvas中绘制矩形实例
Jan 01 HTML / CSS
HTML5 拖放功能实现代码
Jul 14 HTML / CSS
CSS SandBox应用场景及常见问题
Jun 25 HTML / CSS
详解flex:1什么意思
Jul 23 HTML / CSS
纯css3使用vw和vh实现自适应的方法
Feb 09 #HTML / CSS
如何用css3实现switch组件开关的方法
Feb 09 #HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
Feb 07 #HTML / CSS
css3 clip实现圆环进度条的示例代码
Feb 07 #HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 #HTML / CSS
详解CSS 3 中的 calc() 方法
Jan 12 #HTML / CSS
css3实现冲击波效果的示例代码
Jan 11 #HTML / CSS
You might like
劣质的PHP代码简化
2010/02/08 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
php 常用的系统函数
2017/02/07 PHP
限制文本框输入N个字符的js代码
2010/05/13 Javascript
通过DOM脚本去设置样式信息
2010/09/19 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
JavaScript中click和onclick本质区别与用法分析
2018/06/07 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[05:24]TI9采访——教练
2019/08/24 DOTA
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
Python升级提示Tkinter模块找不到的解决方法
2014/08/22 Python
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
Python栈类实例分析
2015/06/15 Python
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
使用Python对MySQL数据操作
2017/04/06 Python
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
vue常用指令代码实例总结
2020/03/16 Python
python如何代码集体右移
2020/07/20 Python
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
10条PHP编程习惯
2014/05/26 面试题
药剂学专业应届生自荐信
2013/09/29 职场文书
公积金转移接收函
2014/01/11 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
企业优秀员工事迹材料
2014/05/28 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
教师自查自纠材料
2014/10/14 职场文书
戒赌保证书
2015/05/11 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang