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 相关文章推荐
25个CSS3动画按钮和菜单教程分享
Oct 03 HTML / CSS
使用CSS3的appearance属性改变任何元素的浏览器默认风格
Dec 24 HTML / CSS
纯CSS绘制漂亮的圆形图案效果
May 07 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 HTML / CSS
HTML5几个设计和修改的页面范例分享
Sep 29 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
Mar 25 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 HTML / CSS
HTML5录音实践总结(Preact)
May 07 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 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
深入PHP内存相关的功能特性详解
2013/06/08 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
php session的应用详细介绍
2017/03/22 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
将form表单中的元素转换成对象的方法适用表单提交
2014/05/02 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
由ReactJS的Hello world说开来
2015/07/02 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
vue中使用rem布局代码详解
2019/10/30 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
[05:05]第三天的dota2
2013/07/29 DOTA
python实现复制整个目录的方法
2015/05/12 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
Numpy的简单用法小结
2019/08/28 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
校园游戏活动新闻稿
2014/10/15 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
2014年党总支工作总结
2014/12/18 职场文书
舞出我人生观后感
2015/06/16 职场文书
女性健康讲座主持词
2015/07/04 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
关于CSS自定义属性与前端页面的主题切换问题
2022/03/21 HTML / CSS