<div class="card">
  <div class="contentBx">
    <div class="content">
      <h2>web前端开发<br><span>一个前端开发文档平台</span></h2>
      <div class="imgBx">
        <img src="data:image/png;base64,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">
      </div>
      <a href="https://mankeung.github.io/docs/mk-data" target="_blank">欢迎访问</a>
    </div>
  </div>
  <div class="toggle">
    <span></span>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #fff;
}

.card {
  position: relative;
  width: 350px;
  height: 85px;
  background: #1e84e4;
  border-radius: 20px;
  transition: 0.5s ease-in-out;
  filter: drop-shadow(-20px 20px 40px #1e84e4);
}

.card.active {
  height: 420px;
}

.toggle {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  bottom: -60px;
  width: 70px;
  height: 60px;
  border-bottom-left-radius: 35px;
  border-bottom-right-radius: 35px;
  background: #1e84e4;
  cursor: pointer;
}

.toggle::before {
  content: '';
  position: absolute;
  left: -34px;
  width: 35px;
  height: 35px;
  background: transparent;
  border-top-right-radius: 35px;
  box-shadow: 11px -10px 0 10px #1e84e4;
}

.toggle::after {
  content: '';
  position: absolute;
  right: -34px;
  width: 35px;
  height: 35px;
  background: transparent;
  border-top-left-radius: 35px;
  box-shadow: -11px -10px 0 10px #1e84e4;
}

.toggle span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-70%) rotate(405deg);
  width: 10px;
  height: 10px;
  border-bottom: 3px solid #fff;
  border-right: 3px solid #fff;
  transition: 0.5s;
}

.card.active .toggle span {
  transform: translate(-50%,-70%) rotate(225deg);
}

.contentBx {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.content {
  position: relative;
  padding: 20px;
  text-align: center;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.content h2 {
  color: #fff;
  font-weight: 500;
  font-size: 1.25em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.1em;
}

.content h2 span {
  font-size: 0.75em;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: initial;
}

.imgBx {
  position: relative;
  width: 250px;
  height: 250px;
  background: #fff;
  margin-top: 20px;
  overflow: hidden;
  border: 5px solid #fff;
  box-shadow: -10px 10px 10px rgba(0,0,0,0.15);
  pointer-events: none;
}

.imgBx img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content a {
  text-decoration: none;
  position: relative;
  margin-top: 20px;
  padding: 10px 35px;
  border-radius: 25px;
  border: none;
  outline: none;
  cursor: pointer;
  box-shadow: -10px 10px 10px rgba(0,0,0,0.15);
  font-size: 1em;
  text-transform: uppercase;
  background: white;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: #333;
}

let card = document.querySelector('.card');
let cardtoggle = document.querySelector('.toggle');
cardtoggle.onclick = function(){
  card.classList.toggle('active');
};