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

前端  /  管理员 发布于 7年前   123

本文介绍了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>

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


  • 上一条：
    css 进度条的文字根据进度渐变的示例代码
    下一条：
    CSS水平垂直居中解决方案(6种)

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客