css3仿写水波纹效果

最新推荐文章于 2024-07-14 13:35:37 发布

coder86

最新推荐文章于 2024-07-14 13:35:37 发布

阅读量209

点赞数 1

分类专栏： css 文章标签： css3实现水波纹效果

本文链接：https://blog.csdn.net/jack__love/article/details/103856439

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

特效如下

是向四周扩散的效果，带animate的

直接上代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <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: #FAB328;
            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 #FAB328;
            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 #FAB328;
            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 #FAB328;
            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: 261px; 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>