So erzielen Sie den Popup-Fenstereffekt von Eingabeaufforderungstext in CSS3

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!