svg+css布局实现提示效果代码-html代码-BFW代码库

代码语言：html
代码描述：svg+css布局实现提示效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap");
body {
  align-items: center;
  background-color: #eef0f6;
  display: flex;
  font-family: "Source Sans Pro", sans-serif;
  justify-content: center;
  height: 100vh;
}
.card {
  align-items: center;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 0.4px 3.6px rgba(0, 0, 0, 0.004),
    0 1px 8.5px rgba(0, 0, 0, 0.01), 0 1.9px 15.7px rgba(0, 0, 0, 0.019),
    0 3.4px 28.2px rgba(0, 0, 0, 0.03), 0 6.3px 54.4px rgba(0, 0, 0, 0.047),
    0 15px 137px rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
  position: relative;
  width: 336px;
}
.top {
  background-color: #eee;
  border-radius: 20px;
  margin: 16px 0;
  width: 260px;
}
.text {
  box-sizing: border-box;
  padding: 0 20px 20px;
  width: 100%;
}
.title {
  align-items: center;
  display: flex;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 4px;
  position: relative;
}
.tooltip {
  font-size: 16px;
  font-weight: normal;
  margin-top: 2px;
  position: relative;
}
.tooltip:hover {
  cursor: help;
}
.tooltip-spacing {
  height: 20px;
  margin: 8px;
  position: relative;
  width: 20px;
}
.tooltip-bg1 {
  background-color: #000;
  border-radius: 10px;
  content: " ";
  display: flex;
  height: 20px;
  position: absolute;
  top: 0;
  width: 20px;
}
.tooltip-bg2 {
  background-color: #fff;
  border-radius: 8px;
  content: " ";
  display: flex;
  height: 16px;
  left: 2px;
  position: absolute;
  top: 2px;
  width: 16px;
}
.tooltip-text {
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  position: relative;
  text-align: center;
  width: 20px;
}
.info {
  color: #64686b;
}
.popup-bg {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.16))
    drop-shadow(0 3px 6px rgba(0, 0, 0, 0.23));
  position: absolute;
  top: -126px;
}
.popup-outline {
  position: absolute;
  top: -126px;
}
.popup-text {
  border-radius: 12px;
  box-sizing: border-box;
  color: #fff;
  font-size: 16px;
  font-weight: normal;
  left: 8px;
  opacity: 0;
  padding: 12px 16px;
  position: absolute;
  top: -117px;
  transition: opacity 240ms 120ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 292px;
}
.tooltip:hover ~ .popup-text {
  display: block;
}
.popup-bg {
  opacity: 0;
  transition: opacity 240ms 120ms cubic-bezier(0.4, 0, 0.2, 1);
}
.popup-outline-left {
  stroke-dasharray: 0 426px;
  stroke-dashoffset: 1px;
  transition: stroke-dasharray 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.popup-outline-right {
  stroke-dasharray: 352px 352px;
  stroke-dashoffset: -352px;
  transition: stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tooltip:hover ~ .popup-text {
  opacity: 1;
}
.tooltip:hover ~ .popup-bg {
  opacity: 1;
  transition: opacity 240ms 120ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tooltip:hover ~ .popup-outline .popup-outline-left {
  stroke-dasharray: 426px 426px;
  transition: stroke-dasharray 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tooltip:hover ~ .popup-outline .popup-outline-right {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.buttons {
  display: flex;
  margin-top: 8px;
  width: 100%;
}
.button {
  align-items: center;
  background: #edf1f7;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  height: 50px;
  justify-content: center;
  margin: 0 5px 28px 20px;
  width: 100%;
}

.button:last-child {
  margin: 0 20px 20px 5px;
}

.button-primary {
  background-color: #0060f6;
  color: #fff;
}
</style>


</head>

<body translate="no" >
  <div class="card">
      <svg xmlns="http://www.w3.org/2000/svg" width="260" height="241" viewBox="0 0 2876.0933 2666.6667" class="top">
        <path d="M0 2666.667h2876.093V0H0v2666.667" fill="#fff" />
        <path d="M1643.333 899.213c-188.72 20.627-314.318 301.534-242.56 642.574 71.774 341.026 127.574 493.6 703.76 431.893 576.174-61.707 448.507-869.907 30.934-772.813-224.52 52.186-126.627-341.627-492.134-301.654" fill="#184655" />
        <path d="M1149.77 1671.667c-63.026 16.44-306.07 53.88-334.642 64.533l148.207 151.747h217.05l-30.614-216.28" fill="#f7a491" />
        <path d="M2378.96 627.773c-5.107-9.546-69.347-61.746-75.053-66.933-5.707-5.187-48.907-26.267-49.254-2.733-.093 6.76 39.014 32.693 53.707 42.84-12.493-10.707-68.733-37.934-76.64-33-15.32 9.573 50.12 57.96 70.413 69.773 16.227 9.453 22.094 60.533 23.787 80.627.6 7.093-1.48 26.88-.627 19.826.16-1.293-17.2-28.066-24.68-42.72-4.933-9.64-13.533-12.933-18.013-6.44-11.107 16.107 18.6 103.48 27.627 115.067 10.693 13.707 34.986 36.507 44.226 45.147 0 0 46.467 438.16 32.187 448.653-33.4 24.547-362.933 202.947-362.933 202.947s34.506 210.613 42.426 203.293c7.907-7.32 432.627-256.267 454.16-299.92 31.134-63.16-9.093-312.12-49.52-475.533-13.6-65-60.506-242.36-91.813-300.894" fill="#b35e4b" />
        <path d="M2371.747 717.613l8.826 3.894s11.747 7.826 9.08 17.426c-1.56 5.56-5.053 6.534-25.96 14.134-15.12 5.493-35.64 6.853-66.453 8.506l74.507-43.96" fill="#944634" />
        <path d="M2379.227 724.653l-105.28-203.146c-3.254-6.28-11.387-8.814-18.16-5.654l-8.2 3.934s-.027.026-.08.066l-.027-.053-73.787 38.787c-5.493 2.893-7.573 9.346-4.68 14.493l110.534 196.107 73.2-18.027 20.12-9.4c6.773-3.16 9.613-10.827 6.36-17.107" fill="#13375b" />
        <path d="M2274.68 691.253s-7.587 24.707-5.853 53.814c1.72 29.106 62.373 85.986 72.173 90.72 9.813 4.733 1-35.36 1-35.36s-1.76-37.52-11.56-40.147c-9.8-2.64-26.84-16-26.84-16s-9.16-86.107-28.92-53.027M2365.2 651.093l-23.187-33.146s-49.853-58.654-69.826-45.107c-19.974 13.547 57.146 60.32 57.146 60.32s30.08 42.693 61.8 102.2l5.734-21.893-31.667-62.374" fill="#b35e4b" />
        <path d="M1867.187 1541.787c100.066-43.334 281.826-110.974 281.826-110.974l60.08 219.427-297.666 157.707s-70.427-254.827-44.24-266.16M1472.827 1558.987s-36.614 1.346-129.4 31.066c-101.514 32.507-292.01 79.96-292.01 79.96L1153.14 1896.2l339.873-40.387s33.147-296.826-20.186-296.826" fill="#f47458" />
        <path d="M787.912 1983.533l-122.04.2c-1.21-11.586-13.397-381.76-12.613-392.52.785-10.773 122.67-87.493 108.665-98.613-14.005-11.133-66.673 25.933-72.65 19.493-13.78-14.853 5.858-178.866-7.162-175.986-24.36 5.386-16.518 104.373-28.38 104.84-11.862.453 1.716-104.08-18.305-110.174-20.02-6.093-3.287 100.094-11.868 104.774-8.58 4.68-29.576-97.814-47.384-86.374-9.67 6.2 20.957 90.694 7.385 90.92-13.57.227-47.384-60.866-57.816-52.68-10.43 8.187 39.605 58.64 41.875 94.92 2.27 36.267 19.16 50.2 5.308 108.947-13.853 58.733-86.083 455-42.485 501.213 35.4 37.52 237.864 58.934 254.932 49.307 65.414-36.893 2.537-158.267 2.537-158.267" fill="#b35e4b" />
        <path d="M685.1 1515.813s-54.797-10.493-63.893 37.214c0 0 21.257-37.347 63.892-37.214" fill="#944634" />
        <path d="M1098.227 1986.507s9.413-55.374 138.704-68.827c131.843-13.733 269.883-100.107 269.883-100.107s12.334 190.187-26.48 229.44l-132.72 47.214-249.386-107.72M1021.307 1925.693s-46.423 3.347-105.728 11.107c-59.305 7.76-204.32 23.587-204.32 23.587l38.23 205.413s214.85-1.013 222.33 2.493c7.476 3.507 57.82-219.52 49.487-242.6" fill="#50bfa5" />
        <path d="M2078.547 2666.667c-67.987-129.587-159.814-239.574-159.814-239.574l-427.28 21.68s-37.373 108.294-41.906 217.894h629" fill="#355389" />
        <path d="M1943.613 2440.467c-194.066 83.466-468.746 3.946-468.746 3.946 37.146-193.573-47.867-332.84-68.187-529.04-25.533-136.546 38.36-152.506 66.147-356.386.186-1.374 141.546-11.24 141.546-11.24l147.094 3.64s60.36-4.107 105.72-9.6c3.346-.414 81.946 278.84 69.28 442.093-8.627 111.32-14.174 194.093-13.374 267.667 1.174 106.946 20.52 188.92 20.52 188.92" fill="#f47458" />
        <path d="M1980.627 1863.307c4.56 144.173-129.334 183.706-278.627 183.706s-270.32-70.626-270.32-157.733c0-87.12 99.253-204.373 248.467-209.68 186.76-6.64 296.973 73.28 300.48 183.707" fill="#f47458" />
        <path d="M1651.587 1310.347s-3.374 24.053-8.56 57.226c-9.494 60.707-16.48 149.907-28.654 180.174C1603.64 1574.4 1668.587 1653 1745.2 1653c88.28 0 44.347-68.347 47.107-101.107 2.746-32.48 3.493-121.853 9.306-195.92 3.147-40.066 5.427-69.28 5.427-69.28l-155.453 23.654" fill="#b35e4b" />
        <path d="M1801.907 1354.64c2.973-39.2 5.133-67.947 5.133-67.947l-155.453 23.654s-3.934 22.64-8.254 54.64c63.014 36.56 119.694 25.026 158.574-10.347" fill="#944634" />
        <path d="M1700.333 958.493s-61.28 13.814-99.12 71.56c-37.826 57.734-63.8 227.72 60.827 307.067 124.613 79.333 221.533-32.893 223.133-142.36 1.614-109.48-21.853-255.........完整代码请登录后点击上方下载按钮下载查看