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

(编辑：jimmy 日期: 2024/10/1 浏览：3 次 )

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

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

上一篇：ES6与canvas实现鼠标小球跟随效果
下一篇：CSS水平垂直居中解决方案(6种)