CSS 实现弹窗效果

<!-- 点击按钮 -->
<div class="section__btn">
  <!-- 链接弹窗，点击按钮弹出弹窗 -->
  <a href="#popup" class="btn">Click me</a>
</div>

<!-- 弹窗内容 -->
<div class="popup" id="popup">
  <div class="popup__content">
    <div class="popup__left">
      <img src="./user_img.jpg" alt="A Person" class="popup__img" />
    </div>
    <div class="popup__right">
      <!-- 关闭弹窗按钮 -->
      <a href="#" class="popup__closed">&times;</a>
      <h1 class="popup__heading">About me</h1>
      <p class="popup__text"
        >Est adipisci vel. Ratione qui possimus dolore quo sit doloribus quia ut
        incidunt. Totam omnis aliquam ipsa. Dolor laboriosam sunt sint. Est
        voluptas enim ipsum. Esse nesciunt distinctio voluptatem. Sunt et est
        expedita ut tempore ut dolorem ut suscipit. Tempore quisquam molestias
        cupiditate nam. Sed ipsa accusantium voluptatibus fuga. Eos et enim sed
        dignissimos et itaque praesentium id. Repudiandae tempore consequatur
        debitis ex excepturi maxime in dolor. Voluptas aut a et ut sed at. Ex
        qui blanditiis est sapiente excepturi qui doloremque autem numquam. Rem
        nemo qui consectetur molestias velit eum. Ut fugiat fugit nulla quas
        assumenda. Rerum consequatur adipisci et molestiae deserunt eaque. Quo
        ipsa nesciunt molestiae esse. Veritatis dolore optio et error voluptas.
        Cumque aut rerum corrupti quas voluptatem dolore voluptatem sit. Et
        porro repellendus error voluptate ut.
      </p>
    </div>
  </div>
</div>

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 字体大小，10px / 16px = 62.5% */
html {
  font-size: 62.5%;
}

.section__btn {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn {
  padding: 1.6rem 6rem;
  border: none;
  font-size: 3.2rem;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 1000px;
  background-color: #55c57a;
  color: #fff;
  position: relative;
}

.btn::after {
  content: "";
  background-color: #55c57a;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 1000px;
  z-index: -1;
  transition: all 0.4s;
}

.btn:hover {
  transform: translateY(-0.2rem);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

.btn:active {
  transform: translateY(0.5rem);
  box-shadow: 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

.btn:hover.btn::after {
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0;
}

/* 弹窗 */
.popup {
  /* 设置弹窗大小及位置 */
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  /* 隐藏弹窗 */
  opacity: 0;
  visibility: hidden;
}

/* 点击按钮显示弹窗 */
.popup:target {
  opacity: 1;
  visibility: visible;
}

/* 点击按钮显示弹窗内容 */
.popup:target .popup__content {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* 弹窗内容 */
.popup__content {
  width: 50%;
  background-color: #fff;
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.2);
  border-radius: 0.5rem;
  /* 居中弹窗内容 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  transition: all 0.4s 0.2s;
}

.popup__left {
  width: 40%;
}

.popup__img {
  display: block;
  width: 100%;
  height: 100%;
}

.popup__right {
  width: 60%;
  position: relative;
  padding: 0 4rem;
  text-align: center;
}

.popup__closed {
  font-size: 3.2rem;
  text-decoration: none;
  color: #777;
  line-height: 1;
  display: inline-block;
  position: absolute;
  top: 1rem;
  right: 2rem;
}

.popup__closed:hover {
  color: #55c57a;
}

.popup__closed:hover {
  color: #55c57a;
}

.popup__heading {
  font-size: 5.2rem;
  font-weight: 600;
  margin: 4rem 0;
}

.popup__text {
  font-size: 2.4rem;
  line-height: 1.4;
  text-align: justify;
}