css实现点击弹出层效果代码-html代码-BFW代码库

css实现点击弹出层效果代码

代码语言：html

所属分类：弹出层

代码描述：css实现点击弹出层效果代码

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


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

<head>

  <meta charset="UTF-8">
  


  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");
*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  background-color: #f4f5f7;
  padding-top: 10vh;
  padding-bottom: 10vh;
}

strong {
  font-weight: 600;
}

article {
  width: 90%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.125rem;
  padding: 2rem;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 15px 20px -10px rgba(0, 0, 0, 0.1);
}
article > * + * {
  margin-top: 1em;
}
article:is(h1, h2, h3) + * {
  margin-top: 0.5em;
}
article h1 {
  font-weight: 900;
  font-size: 2rem;
  line-height: 1.125;
}
article code {
  backgro.........完整代码请登录后点击上方下载按钮下载查看