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圆角样式分享自定义按钮样式
Dec 27 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
Mar 11 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
Jul 06 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
Jan 03 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 HTML / CSS
canvas实现手机的手势解锁的步骤详细
Mar 16 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
Jan 27 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中判断一个字符串包含另一个字符串的方法
2007/03/19 PHP
如何用php获取程序执行的时间
2013/06/09 PHP
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
Vue列表渲染的示例代码
2018/11/01 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
tensorflow获取变量维度信息
2018/03/10 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
Python3 Tkinkter + SQLite实现登录和注册界面
2019/11/19 Python
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
机械设计制造专业个人求职信
2013/09/25 职场文书
中西医专业毕业生职业规划书
2014/02/24 职场文书
《九寨沟》教学反思
2014/04/08 职场文书
党的作风建设心得体会
2014/10/22 职场文书
证劵公司反洗钱宣传活动总结
2015/05/08 职场文书
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript