CSS3-Nachahmung von Alibaba Cloud-Wassermuster-Effektcode-Sharing-CSS-Tutorial-php.cn

CSS3-Nachahmung von Alibaba Cloud-Wassermuster-Effektcode-Sharing

小云云

Freigeben： 2018-02-23 09:34:08

Original

1712 Leute haben es durchsucht

In diesem Artikel werden Ihnen hauptsächlich relevante Informationen zum Beispielcode von CSS3 zur Nachahmung des Alibaba Cloud-Wassermustereffekts vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Rendering

Keine Worte mehr, kommen wir zum Code.

<!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;">
    <p 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>
        <p class="point point_10"></p>
        <p class="point point_40"></p>
        <p class="point point_shadow point_80"></p>
    </p>
</body>
</html>

Nach dem Login kopieren

Verwandte Empfehlungen:

jQuery implementiert Click Water Ripple Animation_jquery

Das obige ist der detaillierte Inhalt vonCSS3-Nachahmung von Alibaba Cloud-Wassermuster-Effektcode-Sharing. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!