Question

如何67实现HTML5表单提示弹窗功能

Answer 1

.tooltip, .arrow:after {
background: black;
border: 2px solid white;
}

.tooltip {
pointer-events: none;
opacity: 0;
display: inline-block;
position: absolute;
padding: 10px 20px;
color: white;
border-radius: 20px;
margin-top: 20px;
text-align: center;
font: bold 14px"Helvetica Neue", Sans-Serif;
font-stretch: condensed;
text-decoration: none;
text-transform: uppercase;
box-shadow: 0 0 7px black;
}
.arrow {
width: 70px;
height: 16px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -16px;
}
.arrow:after {
content:"";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
-webkit-box-shadow: 6px 5px 9px -9px black,5px 6px 9px -9px black;
-moz-box-shadow: 6px 5px 9px -9px black,5px 6px 9px -9px black;
box-shadow: 6px 5px 9px -9px black,5px 6px 9px -9px black;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.tooltip.active {
opacity: 1;
margin-top: 5px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
}
.tooltip.out {
opacity: 0;
margin-top: -20px;
}