Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use HTML5+CSS3 to create a fade into the effect of the prompt box, I hope you will learn something after reading this article, let's discuss it together!

Step 1: set up a basic prompt box

The code is as follows

PHP Chinese website

.tooltip {

Position:relative

Display:inline-block

Border-bottom:1pxdottedblack

}

.tooltip.tooltiptext {

Visibility:hidden

Width:120px

Background-color:black

Color:#fff

Text-align:center

Border-radius:6px

Padding:5px0

/ * location * /

Position:absolute

Z-index:1

}

.tooltip: hover.tooltiptext {

Visibility:visible

}

Move the mouse to this.

Prompt text

Step 2: use the CSS3transition attribute and the opacity attribute to achieve the fading effect of the prompt tool

The code is as follows

PHP Chinese website

.tooltip {

Position:relative

Display:inline-block

Border-bottom:1pxdottedblack

}

.tooltip.tooltiptext {

Visibility:hidden

Width:120px

Background-color:black

Color:#fff

Text-align:center

Border-radius:6px

Padding:5px0

Position:absolute

Z-index:1

Bottom:100%

Left:50%

Margin-left:-60px

/ * fade in-display from 0% to 100% in 1 second: * /

Opacity:0

Transition:opacity1s

}

.tooltip: hover.tooltiptext {

Visibility:visible

Opacity:1

}

Fade in effect

Move the mouse over the following elements, and the prompt tool will be fully displayed from 0% to 100% in another second.

PHP Chinese website

666666666666

After reading this article, I believe you have a certain understanding of "how to use HTML5+CSS3 to create a prompt box for fading effect". If you want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.