css实现按钮悬浮弹出详细内容效果代码-html代码-BFW代码库

代码语言：html

所属分类：悬停

代码描述：css实现按钮悬浮弹出详细内容效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


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

<head>

  <meta charset="UTF-8">

  
<style>
@import url(https://fonts.googleapis.com/css?family=Lato);
body {
  display: -webkit-box;
  display: flex;
  height: 100vh;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  font-family: Lato, sans-serif;
  background: #ECEFFC;
}

.shadow {
  -webkit-filter: drop-shadow(-2px 2px 8px rgba(50, 50, 0, 0.5));
          filter: drop-shadow(-2px 2px 8px rgba(50, 50, 0, 0.5));
}

.card {
  -webkit-clip-path: inset(0 0 70% 0);
          clip-path: inset(0 0 70% 0);
  -webkit-transform: translateY(30%);
          transform: translateY(30%);
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}
.card .card-header {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  width: 400px;
  height: 100px;
  font-size: 2em;
  color: white;
  background-color: #2979ff;
  -webkit-clip-path: inset(0 19% 0 19%);
          clip-path: inset(0 19% 0 19%);
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}
.card .card-body {
  box-sizing: border-box;
  padding: 1.25em;
  width: 400px;
  height: 225px;
  font-size: 1.5em;
  background: white;
  -webkit-clip-path: inset(0 19% 0 19%);
          clip-path: inset(0 19% 0 19%);
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}
.card .card-body dl {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: justify;
          justify-content: space-between;
  width: 100%;
  height: 100%;
  margin: 0;
}
.card .card-body span {
  opacity: 0;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition: 0.5s ease-in;
  transition: 0.5s ease-in;
}
.card .card-body span:nth-child(1) {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.card .card-body span:nth-child(2) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.card .card-body span:nth-child(3) {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.card .card-body span dt,
.card .card-body span dd {
  display: inline;
  margin: 0;
}
.card .card-body span dt svg,
.card .card-body span dd svg {
  margin-right: 0.3em;
}
.card:hover {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}
.card:hover .card-header,
.card:hover .card-body {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}
.card:hover span {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
</style>


</head>

<body translate="no" >
  <div class="shadow">
  <div class="card">
    <div class="card-header">Contact</div>
    <div class="card-body">
      <dl>
        <span>
                <dt><a href="https://github.com/alphardex" target="_blank"><svg t="1580195147272" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="737" width="27" height="27"><path d="M950.930286 512q0 143.433143-83.748571 257.974857t-216.283429 158.573714q-15.433143 2.852571-22.601143-4.022857t-7.168-17.115429l0-120.539429q0-55.442286-29.696-81.115429 32.548571-3.437714 58.587429-10.313143t53.686857-22.308571 46.299429-38.034286 30.281143-59.977143 11.702857-86.016q0-69.12-45.129143-117.686857 21.138286-52.004571-4.534857-116.589714-16.018286-5.12-46.299429 6.290286t-52.589714 25.161143l-21.723429 13.677714q-53.174857-14.848-109.714286-14.848t-109.714286 14.848q-9.142857-6.290286-24.283429-15.433143t-47.689143-22.016-49.152-7.68q-25.161143 64.585143-4.022857 116.589714-45.129143 48.566857-45.129143 117.686857 0 48.566857 11.702857 85.723429t29.988571 59.977143 46.006857 38.253714 53.686857 22.308571 58.587429 10.313143q-22.820571 20.553143-28.013714 58.88-11.995429 5.705143-25.746286 8.557714t-32.548571 2.852571-37.449143-12.288-31.744-35.693714q-10.825143-18.285714-27.721143-29.696t-28.306286-13.677714l-11.410286-1.682286q-11.995429 0-16.603429 2.56t-2.852571 6..........完整代码请登录后点击上方下载按钮下载查看