效果图

今天给各位官人带来的是，HTML5鼠标悬停动画提示框特效源码！

效果炫图生动，给网站带来较好的交互体验！

由于代码过长需要文档版源码来我的前端群581549454，已上传到群文件

废话不多说，上源码！

.tooltip {

position: relative;

display: inline-block;

}

.tooltip__trigger {

cursor: pointer;

position: relative;

}

.tooltip__trigger-text {

display: block;

padding: 0.85em;

pointer-events: none;

}

.tooltip__base {

position: absolute;

bottom: 2em;

left: 50%;

margin-left: -150px;

width: 300px;

height: 200px;

display: flex;

align-items: center;

justify-content: center;

opacity: 0;

pointer-events: none;

}

.tooltip__content {

color: #4a4a4a;

display: flex;

position: relative;

align-items: center;

justify-content: center;

width: 65%;

padding: 0 1em;

opacity: 0;

font-size: 0.85em;

}

.tooltip__shape,

.tooltip__deco {

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

}

.tooltip__shape {

fill: #141514;

}

.tooltip--cora .tooltip__base{

transform-origin: 50% 100%;

}

.tooltip--cora .tooltip__content {

margin-bottom: 1em;

}

.tooltip--smaug .tooltip__base {

bottom: -0.5em;

transform-origin: 50% 100%;

}

.tooltip--smaug .tooltip__content {

padding: 0;

}

.tooltip--dori .tooltip__base {

bottom: -0.5em;

}

.tooltip--dori .tooltip__content {

margin: 0 0 1em;

}

.tooltip--walda .tooltip__base {

left: 0;

bottom: 0.75em;

position: absolute;

margin-left: 0;

width: 250px;

height: 100px;

padding: 0 0 0 0.25em;

}

.tooltip--walda .tooltip__trigger-text {

padding: 1em;

}

.tooltip--walda .tooltip__content {

margin: 0;

width: 100%;

height: 100%;

align-items: flex-start;

text-align: left;

font-size: 0.85em;

line-height: 2;

opacity: 1;

justify-content: flex-start;

}

.tooltip--walda .tooltip__letters span {

display: inline-block;

white-space: pre;

opacity: 0;

}

.tooltip--walda .tooltip__deco {

width: 4px;

height: 100%;

background: #141514;

transform-origin: 50% 100%;

}

.tooltip--gram .tooltip__base {

bottom: -0.5em;

}

.path-narvi {

transform-origin: 200px 150px;

}

.tooltip--narvi .tooltip__content {

width: 80%;

}

.path-amras-1 {

transform-origin: 115px 111px;

}

.path-amras-2 {

transform-origin: 204px 107px;

}

.path-amras-3 {

transform-origin: 279px 66px;

}

.path-amras-4 {

transform-origin: 320px 99px;

}

.path-amras-5 {

transform-origin: 137px 199px;

}

.path-amras-6 {

transform-origin: 222px 217px;

}

.path-amras-7 {

transform-origin: 80px 168px;

}

.path-amras-8 {

transform-origin: 296px 211px;

}

.path-amras-9 {

transform-origin: 310px 167px;

}

.tooltip--hador .tooltip__base {

bottom: 2.25em;

margin-left: -115px;

}

.path-hador-1 {

transform-origin: 148px 284px;

}

.path-hador-2 {

transform-origin: 160px 268px;

}

.path-hador-3 {

transform-origin: 171px 246px;

}

.path-hador-4 {

transform-origin: 200px 120px;

}

.tooltip--hador .tooltip__content {

width: 50%;

margin: 0 0 2.5em;

}

.tooltip--malva .tooltip__content {

width: 50%;

}

.tooltip--sadoc .tooltip__base {

bottom: 2.5em;

}

.tooltip--sadoc .tooltip__shape path {

fill: #1d1f1e;

stroke: #5a5c5b;

stroke-width: 3px;

}

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin

dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em

0;}abbr[title]{border-bottom:1px

dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C"

"\201D" "\2018"

"\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px

solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em

0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html

input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html

input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}