Heim >Web-Frontend >CSS-Tutorial >So erzielen Sie den Popup-Fenstereffekt von Eingabeaufforderungstext in CSS3

So erzielen Sie den Popup-Fenstereffekt von Eingabeaufforderungstext in CSS3

php中世界最好的语言
php中世界最好的语言Original
2018-05-24 14:38:504355Durchsuche

Ich glaube, jeder hat den Popup-Fenstereffekt von Text gemacht, aber in CSS3 kann dieser Effekt ohne zusätzlichen JS-Code manipuliert werden. Heute stellen wir Ihnen einen Popup-Fenstereffekt von Eingabeaufforderungstext ohne JS vor.

CSS-Code

[data-tips] {
         position: relative;
         text-decoration: none;
}
         [data-tips]:after,
         [data-tips]:before {
             position: absolute;
             z-index: 100;
                   opacity: 0;
         }
                   [data-tips]:after {
                            content: attr(data-tips);
                            height: 25px;
                            line-height: 25px;
                            padding: 0 10px;
                            font-size: 12px;
                            text-align: center;
                            color: #fff;
                            background: #222;
                            border-radius: 5px;
                            text-shadow: 0 0 5px #000;
                            -moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
                            -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
                            box-shadow: 0 0 5px rgba(0,0,0,0.3);
                            white-space: nowrap;
                            -moz-box-sizing: border-box;
                            -webkit-box-sizing: border-box;
                            box-sizing: border-box;
                   }
                   [data-tips]:before {
                            content: "";
                            width: 0;
                            height: 0;
                            border-width: 6px;
                            border-style: solid;
                   }
                            [data-tips]:hover:after,
                            [data-tips]:hover:before {
                                     opacity: 1;
                            }
/* Top tips */
[data-tips].top-tip:after,
[data-tips].top-tip:before {
    -webkit-transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
    -moz-transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
    transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
         bottom: 90%;
         left: -9999px;
         margin-bottom: 12px;
}
         [data-tips].top-tip:before {
                   border-color: #222 transparent transparent transparent;
                   margin-bottom: 0;
         }
         [data-tips].top-tip:hover:after,
         [data-tips].top-tip:hover:before {
                   bottom: 100%;
                   left: 0;
         }
         [data-tips].top-tip:hover:before {
                   left: 15px;
         }
/* Bottom tip */
[data-tips].bottom-tip:after,
[data-tips].bottom-tip:before {
    -webkit-transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
    -moz-transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
    transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
         top: 90%;
         left: -9999px;
         margin-top: 12px;
}
         [data-tips].bottom-tip:before {
                   border-color: transparent transparent #222 transparent;
                   margin-top: 0;
         }
         [data-tips].bottom-tip:hover:after,
         [data-tips].bottom-tip:hover:before {
                   top: 100%;
                   left: 0;
         }
         [data-tips].bottom-tip:hover:before {
                   left: 15px;
         }
/* Right tip */
[data-tips].right-tip:after,
[data-tips].right-tip:before {
    -webkit-transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
    -moz-transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
    transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
         top: -9999px;
         left: 96%;
         margin-left: 12px;
}
         [data-tips].right-tip:before {
                   border-color: transparent #222 transparent transparent;
                   margin-left: 0;
         }
         [data-tips].right-tip:hover:after,
         [data-tips].right-tip:hover:before {
                   left: 100%;
                   top: 0;
         }
         [data-tips].right-tip:hover:before {
                   top: 7px;
         }
/* Left tip */
[data-tips].left-tip:after,
[data-tips].left-tip:before {
    -webkit-transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
    -moz-transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
    transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
         top: -9999px;
         right: 96%;
         margin-right: 12px;
}
         [data-tips].left-tip:before {
                   border-color: transparent transparent transparent #222;
                   margin-right: 0;
         }
         [data-tips].left-tip:hover:after,
         [data-tips].left-tip:hover:before {
                   right: 100%;
                   top: 0;
         }
         [data-tips].left-tip:hover:before {
                   top: 7px;
         }

HTML-Code

<a href="http://bavotasan.com" data-tips="Go to bavotasan.com">bavotasan.com</a>

Dieser Code ist reines CSS und HTML ohne jegliches JS, um spannendere Inhalte zu erhalten Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Verwandte Lektüre:

So konvertieren Sie die CSS-Codierung

CSS3 klicken, um Welleneffekte anzuzeigen

Wie man Leinwand verwendet, um die Interaktion zwischen dem Ball und der Maus zu realisieren

Das obige ist der detaillierte Inhalt vonSo erzielen Sie den Popup-Fenstereffekt von Eingabeaufforderungstext in CSS3. 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