Heim > Artikel > Web-Frontend > CSS-Wasserwellen-Button-Spezialeffekt

CSS-Wasserwellen-Button-Spezialeffekt

韦小宝Original: 2017-11-20 10:47:322737Durchsuche

CSS Wasserwellen-Button-Spezialeffekt, der Quellcode wird kostenlos zur Verfügung gestellt. Schüler, die sich für CSS interessieren, können es studieren ~ Dies ist eine weitere großartige Ergänzung zu unserem CSSTechnologie Eine Verbesserung

Code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>PHP中文网</title>
        <style>
             a{
                text-decoration:none;
                user-select:none;
                position: relative;
                display: block;
                margin: 100px auto;
                width:120px;
                height:50px;
                line-height:50px;
                text-align:center;
                border-radius:25px;
                color:#fff;
                font-size:16px;
                cursor:pointer;
                background-color: #ff8300;
                box-shadow: 0 3px 9px 0 rgba(255, 131, 0, 0.35);
                overflow: hidden;
            }

             a:after{
                position: absolute;
                content: "";
                display: block;
                margin: auto;
                left: -40px;
                top:-75px;
                width: 200px;
                height: 200px;
                background: #ff8300;
                border-radius: 50%;
                opacity: 0;
                transition: all 0.8s;
            }
             a:hover{
                 background-color: #FF9D00;
                 top:-2px;
                 box-shadow: 0 5px 13px 0 rgba(255, 131, 0, 0.59);
            }
             a:active{
                 background-color: #ff8300;
                 top:0;
                 box-shadow: 0 3px 9px 0 rgba(255, 131, 0, 0.35);
            }
             a:active:after{
                width: 0;
                height: 0;
                left:60px;
                top: 25px;
                opacity: 1;
                transition-duration: 0s;
            }
        </style>
    </head>
    <body>
            <a href="javascript:void(0)">PHP中文网</a>
    </body>
</html>

Das Obige sind alle CSS-Wasserwellen-Button-Effekte , weitere Artikel über CSS Bitte gehen Sie zur PHP-Chinese-Website , um nach

Verwandte Empfehlungen zu suchen:

CSS-Mouseover-Animation

CSS-Ripple-Animation

CSS, JS-Würfellotterie-Quellcode

Das obige ist der detaillierte Inhalt vonCSS-Wasserwellen-Button-Spezialeffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS3-Tipps zum Zeichnen verschiedener grundlegender GrafikenNächster Artikel：CSS3-Tipps zum Zeichnen verschiedener grundlegender Grafiken

In Verbindung stehende Artikel

Mehr sehen