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 mask遮罩实现一些特效
Oct 24 HTML / CSS
移动Web—CSS为Retina屏幕替换更高质量的图片
Dec 24 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
CSS3 transition 实现通知消息轮播条
Oct 14 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 HTML / CSS
HTML最新标准HTML5总结(必看)
Jun 13 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
Jan 05 HTML / CSS
css让页脚保持在底部位置的四种方案
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遍历数组的4种方法总结
2014/07/05 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
php 数据结构之链表队列
2017/10/17 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
javascript中Date对象应用之简易日历实现
2016/07/12 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
详解Python中的array数组模块相关使用
2016/07/05 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
python如何调用百度识图api
2020/09/29 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
"火柴棍式"程序员面试题
2014/03/16 面试题
缓刑人员的思想汇报
2014/01/11 职场文书
读书伴我成长演讲稿
2014/05/07 职场文书
小学科学教学计划
2015/01/21 职场文书
新闻通讯稿范文
2015/07/22 职场文书
医学会议开幕词
2016/03/03 职场文书
如何书写授权委托书?
2019/06/25 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
python源码剖析之PyObject详解
2021/05/18 Python