How to use HTML5+CSS3 to create a prompt box for fading effect
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!
