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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

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