前端设计>css>正文

CSS3水纹效果的示例代码

2019-05-30 17:35 君语贤css 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>
本文链接：https://www.weguiding.com/css/455.html
上一篇:手机站做自适应页面要注意的问题
下一篇:文章内容页图片显示优化居中处理
前端设计>css>正文

CSS3水纹效果的示例代码

猜你喜欢
