html 图片信息,4个纯CSS实现的信息提示框（可带图片）

CSS

语言：

CSSSCSS

确定

* {

box-sizing: border-box;

}

body {

min-height: 100vh;

display: flex;

justify-content: center;

align-items: center;

}

body,

button,

input,

textarea,

select {

font-family: "Raleway", sans-serif;

}

.center {

width: 100%;

max-width: 1200px;

text-align: center;

margin: auto;

display: flex;

justify-content: center;

flex-wrap: wrap;

padding: 20px;

}

button,

.btn,

input[type='submit'] {

padding: 20px 60px;

border: none;

outline: none;

background: #47b8e0;

transition: 0.15s ease-in-out;

color: white;

text-decoration: none;

border-radius: 5px;

display: inline-block;

}

button:hover,

button:focus,

.btn:hover,

.btn:focus,

input[type='submit']:hover,

input[type='submit']:focus {

background: #23a3d1;

}

.has-tooltip:hover + .tooltip,

.has-tooltip:focus + .tooltip,

.has-tooltip.hover + .tooltip {

opacity: 1;

transform: translate(-50%, -100%) scale(1) rotate(0deg);

pointer-events: inherit;

}

.tooltip {

display: block;

position: absolute;

top: 0px;

left: 50%;

transform: translate(-50%, -50%) scale(0.75) rotate(5deg);

transform-origin: bottom center;

padding: 10px 30px;

border-radius: 5px;

background: rgba(0, 0, 0, 0.75);

text-align: center;

color: white;

transition: 0.15s ease-in-out;

opacity: 0;

width: 100%;

max-width: 100vw;

pointer-events: none;

z-index: 5;

}

.tooltip.blue {

background: rgba(71, 184, 224, 0.75);

}

.tooltip.blue:after {

border-top: 5px solid rgba(71, 184, 224, 0.75);

}

.tooltip.red {

background: rgba(231, 29, 54, 0.75);

}

.tooltip.red:after {

border-top: 5px solid rgba(231, 29, 54, 0.75);

}

.tooltip.green {

background: rgba(46, 196, 182, 0.75);

}

.tooltip.green:after {

border-top: 5px solid rgba(46, 196, 182, 0.75);

}

.tooltip.purple {

background: rgba(165, 147, 224, 0.75);

}

.tooltip.purple:after {

border-top: 5px solid rgba(165, 147, 224, 0.75);

}

.tooltip:hover {

opacity: 1;

transform: translate(-50%, -100%) scale(1) rotate(0deg);

pointer-events: inherit;

}

.tooltip img {

max-width: 100%;

}

.tooltip:after {

content: "";

display: block;

margin: 0 auto;

widtH: 0;

height: 0;

border: 5px solid transparent;

border-top: 5px solid rgba(0, 0, 0, 0.75);

position: absolute;

bottom: 0;

left: 50%;

transform: translate(-50%, 100%);

}

.field {

position: relative;

padding: 20px;

}