html5⿏标悬停提⽰框,HTML5⿏标悬停动画提⽰框特效源码，
前端必备
效果图
今天给各位官⼈带来的是，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;
html导航源码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 {
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;
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 {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。