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的flexbox实现水平垂直居中与三列等高布局
Sep 12 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 HTML / CSS
Html5页面在微信端的分享的实现方法
Aug 30 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
Jun 21 HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 HTML / CSS
html5绘制时钟动画
Dec 15 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 HTML / CSS
简单实现一个手持弹幕功能+文字抖动特效
Mar 31 HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
Dec 06 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 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
DC宇宙的第一个英雄,堪称动漫史鼻祖,如今成为美国文化的象征
2020/04/09 欧美动漫
UCenter Home二次开发指南
2009/05/28 PHP
PHP的explode和implode的使用说明
2011/07/17 PHP
PHP删除HTMl标签的实现代码
2013/06/30 PHP
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
人事专员岗位职责
2013/11/20 职场文书
成品仓管员工作职责
2013/12/29 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
财务经理岗位职责
2015/01/31 职场文书