react实现卡片式弹出层学习教程效果代码-html代码-BFW代码库

代码语言：html
代码描述：react实现卡片式弹出层学习教程效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/styles/agate.min.css'>
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap");

body {
  background-color: #151515;
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

a,
a:visited {
  color: inherit;
}

.App {
  display: flex;
  justify-content: center;
  color: white;
}

@media (min-width: 770px) and (min-height: 770px) {
  .App {
    align-items: center;
    height: 100vh;
  }
}

* {
  box-sizing: border-box;
}

header {
  height: 120px;
  margin: 0;
  grid-row: 1;
  grid-column: 1/4;
}

header h1 {
  font-family: "Fredoka One", cursive;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(12, auto);
  gap: 10px;
  padding: 50px;
}

.grid .block:nth-of-type(1) {
  grid-row: 2/4;
  grid-column: 1/4;
}

.grid .block:nth-of-type(2) {
  grid-row: 4/6;
  grid-column: 1/4;
}

.grid .block:nth-of-type(3) {
  grid-row: 6/8;
  grid-column: 1/4;
}

.grid .big-block {
  grid-row: 8/11;
  grid-column: 1/4;
}

.grid .small-block {
  grid-row: 11;
  grid-column: 1/4;
}

@media (min-width: 770px) {
  .grid {
    grid-template-columns: repeat(6, auto);
    grid-template-rows: repeat(6, auto);
  }

  .grid .block:nth-of-type(1) {
    grid-row: 2/4;
    grid-column: 1/4;
  }

  .grid .block:nth-of-type(2) {
    grid-row: 4/6;
    grid-column: 1/4;
  }

  .grid .block:nth-of-type(3) {
    grid-row: 1/3;
    grid-column: 4/7;
  }

  .grid .big-block {
    grid-row: 3/6;
    grid-column: 4/7;
  }

  .grid .small-block {
    grid-row: 6;
    grid-column: 1/6;
  }
}

.block {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: inherit;
}

.big-block {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: inherit;
}

.small-block {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: inherit;
}

@media (min-width: 770px) {
  .small-block {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(1, 1fr);
  }
}

.day {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;

  background: white;
  border-radius: 10px;
  perspective: 500px;
}

.day .cover {
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Fredoka One", cursive;
  font-size: 3em;
  transform-origin: left top;
  transition: 1s ease-in-out;
}

.day:hover {
  z-index: 10;
}

.day:hover .cover {
  transform: rotateY(-100deg);
}

.day:nth-of-type(5n-4) .cover {
  background-color: #2f3029;
  color: #f5eed7;
}

.day:nth-of-type(5n-3) .cover {
  background-color: #b73a3b;
  color: #f5eed7;

  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 100 100'><circle cx='25' cy='25' r='15' fill='%239B2D2B'/><circle cx='75' cy='75' r='16' fill='%239B2D2B'/></svg>");
}

.day:nth-of-type(5n-2) .cover {
  background-color: #f5eed7;
  color: #252721;

  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='47.5' height='47.5' viewBox='0 0 100 100'><path d='M 25 10 L 25 17 M 25 33 L 25 40 M 10 25 L 17 25 M 33 25 L 40 25' stroke='%23CD803D' stroke-width='6' stroke-linecap='round' /><circle cx='75' cy='75' r='4' fill='%23CD803D'/></svg>");
}

.day:nth-of-type(5n-1) .cover {
  background-color: #b7c7b0;
  color: #252721;

  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 120 120'><polygon fill='%2393A891' points='120 120 60 120 90 90 120 60 120 0 120 0 60 60 0 0 0 60 30 90 60 120 120 120 '/></svg>");
}

.day:nth-of-type(5n-0) .cover {
  background-color: #b73a3b;
  color: #f5eed7;

  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 100 100'><path d='M 0 25 L 25 0 M 0 50 L 50 0 M 0 75 L 75 0 M 0 100 L 100 0 M 0 125 L 125 0 M 0 150 L 150 0 M 0 175 L 175 0' stroke='%239B2D2B' stroke-width='6' /></svg>");
}

.block:nth-of-type(1) *:nth-of-type(2) {
  grid-column: 2;
  grid-row: 1/3;
}

.block:nth-of-type(2) *:nth-of-type(5) {
  grid-column: 3;
  grid-row: 1/3;
}

.block:nth-of-type(3) *:nth-of-type(1) {
  grid-column: 1;
  grid-row: 1/3;
}

.block:nth-of-type(3) *:nth-of-type(4) {
  grid-column: 3;
  grid-row: 1/3;
}

.big-block *:nth-child(5) {
  grid-column: 2/4;
  grid-row: 2;
}

.small-block *:nth-child(2) {
  grid-column: 2/4;
  grid-row: 1;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

svg {
  border-radius: 10px;
}

.gingerbread .body {
  fill: #cd803d;
}

.gingerbread .eye {
  fill: white;
}
.gingerbread .mouth {
  fill: none;
  stroke: white;
  stroke-width: 2px;
  rx: 2px;
}

.gingerbread .limb {
  stroke: #cd803d;
  stroke-width: 35px;
  stroke-linecap: round;
}

.house {
  stroke: black;
  stroke-width: 2px;
  fill: white;
}

.house .roof {
  fill: none;
  stroke: #d1495b;
  stroke-width: 10px;
  stroke-linecap: round;
}

.house .door {
  fill: #d1495b;
  rx: 2px;
}

.house .stair {
  fill: gray;
}

.house .window {
  fill: #fdea96;
  rx: 5px;
}

.house .window-sill {
  fill: #d1495b;
  stroke-linecap: round;
  rx: 5px;
}

.candy .body {
  stroke-linecap: round;
  fill: none;
}

.candy .red-mark {
  stroke: #d1495b;
  stroke-width: 2.5px;
}

.candy .green-mark {
  stroke: #234236;
  stroke-width: 2.5px;
}

.gift .box {
  fill: #d1495b;
  stroke: black;
  stroke-width: 2px;
}

.gift .stripe {
  fill: white;
  stroke: black;
  stroke-width: 2px;
}

.gift .ribbon {
  stroke: #b73a3b;
  stroke-width: 4px;
  fill: none;
}

.bear {
  background-color: #f5eed7;
}

.bear .face {
  fill: white;
  rx: 50;
  ry: 30;
}

.bear .mouth {
  fill: none;
  stroke: black;
  stroke-width: 2;
}

.sleigh {
  offset-path: path(
    "M-200 80 L -90 80 Q 60 80 60 -10 A 50 50 0 0 0 -60 -10 Q -60 80 90 80 L 200 80"
  );
  animation: roller-coaster 6000ms infinite linear;
}

@keyframes roller-coaster {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

.background {
  display: inline-block;
  border-radius: 10px;

  background-color: #38755b;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 120 120'%3E%3Cpolygon fill='%230c5c4c' points='120 120 60 120 90 90 120 60 120 0 120 0 60 60 0 0 0 60 30 90 60 120 120 120 '/%3E%3C/svg%3E");
}

.flake {
  animation-duration: inherit;
  animation-name: snowing;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.flake.small {
  opacity: 0.7;
}
.flake.slow {
  animation-duration: 5s;
}
.flake.fast {
  animation-duration: 3s;
}

@keyframes snowing {
  from {
    transform: translate(0, -100px);
  }
  to {
    transform: translate(0, 100px);
  }
}

.lights {
  fill: none;
  stroke: #5f4c6c;
  stroke-width: 2;
}

.lights #button {
  cursor: pointer;
}

.bell:hover {
  transform-origin: center 30%;
}

.bell:hover,
.bell:hover .bell-tongue {
  animation-duration: 0.5s;
  animation-delay: -0.25s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-name: ring;
}

@keyframes ring {
  from {
    transform: rotate(-20deg);
  }
  to {
    transform: rotate(20deg);
  }
}

.detail-screen {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 100;
  display: grid;
  grid-template-columns: auto auto;
}

@media (min-width: 770px) {
  .detail-screen {
    grid-template-columns: minmax(400px, auto) auto;
  }
}

@media (min-width: 1200px) {
  .detail-screen {
    width: 1200px;
    height: calc(100% - 30px);
    border-radius: 10px;
  }
  .details {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
}

.content {
  display: flex;
  justify-content: center;
  padding: 50px;
}

@media (min-width: 770px) {
  .content {
    padding: 50px 0 50px 0;
  }
}

.close {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: gray;
  cursor: pointer;

  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 100 100'><path d='M 30 30 L 70 70 M 30 70 L 70 30' stroke='white' stroke-width='10' /></svg>");
}

.details {
  padding: 40px;
  background-color: #333333;
  overflow: scroll;
  color: black;
  background-color: lightgray;
}

.code-section {
  margin-top: 3em;
  margin-bottom: 3em;
}

.source-code {
  color: white;
  background-color: #333333;
  padding: 2em;
  border-radius: 5px;
  overflow: scroll;
}

.twitter {
  color: #f5eed7;
  font-size: 0.8em;
  background-color: #16212b;
}

#youtube,
#youtube-card {
  display: none;
}

@media (min-height: 425px) {
  /** Youtube logo by https://codepen.io/alvaromontoro */
  #youtube {
    z-index: 50;
    width: 100px;
    display: block;
    height: 70px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: red;
    border-radius: 50% / 11%;
    transform: scale(0.8);
    transition: transform 0.5s;
  }

  #youtube:hover,
  #youtube:focus {
    transform: scale(0.9);
  }

  #youtube::before {
    content: "";
    display: block;
    position: absolute;
    top: 7.5%;
    left: -6%;
    width: 112%;
    height: 85%;
    background: red;
    border-radius: 9% / 50%;
  }

  #youtube::after {
    content: "";
    display: block;
    position: absolute;
    top: 20px;
    left: 40px;
    width: 45px;
    height: 30px;
    border: 15px solid transparent;
    box-sizing: border-box;
    border-left: 30px solid white;
  }

  #youtube span {
    font-size: 0;
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  #youtube:hover + #youtube-card {
    z-index: 49;
    display: block;
    position: fixed;
    bottom: 12px;
    right: 10px;
    padding: 25px 130px 25px 25px;
    width: 300px;
    background-color: white;
  }
}
</style>



</head>

<body  >
  <div id="root"></div>


<script>
  // This section contains the detail screen metadata
  const detailScreens = [];
  detailScreens.push({
    title: "Christmas bauble",
    description: `<p>The SVG tag contains the image elements and defines the frame of our image. It has a width and a height property defining how much space the image takes up in the document. There's also a viewBox property that defines a coordinate system. Every image element is positioned based on this coordinate system. The first two values in viewBox define the top-left coordinate in the image and the last two define the size. The size, in this case, matches the one defined at the width and the height, but that's not necessary. If they don't match the image scales up or scales down. With this setting, the 0,0 coordinate ends up at the middle of the image.</p>
    <p>Let’s start with a simple Christmas bauble. Here we only use simple shapes, a rectangle, and two circles. We position and style these elements with attributes. For the circle, we define the center position and for the rectangle, we define the top left corner. These positions are always related to the coordinate system defined by the viewBox.</p>

<p>We also have presentational attributes that style our shapes. Unlike in HTML, we do not use background-color to set a color for a shape but we use the fill attribute. And to set a border for a shape we use stroke and stroke-width. Note how we use the circle element both to draw a ring and a ball with different attributes.</p>`,
    sourceCodes: [{
      type: "HTML",
      content: `<svg width="200" height="200" viewBox="-100 -100 200 200">
  <circle cx="0" cy="20" r="70" fill="#D1495B" />

  <circle
    cx="0"
    cy="-75"
    r="12"
    fill="none"
    stroke="#F79257"
    stroke-width="2"
  />

  <rect x="-17.5" y="-65" width="35" height="20" fill="#F79257" />
</svg>`
    }]
  });
  detailScreens.push({
    title: "Tree",
    description: `<p>We can’t always use basic shapes to assemble our image. A polygon is the simplest way to draw a freeform shape. Here we set a list of coordinates that are connected with straight lines.</p>`,
    sourceCodes: [{
      type: "HTML",
      content: `<svg width="200" height="200" viewBox="-100 -100 200 200">
  <polygon points="0,0 80,120 -80,120" fill="#234236" />
  <polygon points="0,-40 60,60 -60,60" fill="#0C5C4C" />
  <polygon points="0,-80 40,0 -40,0" fill="#38755B" />
  <rect x="-20" y="120" width="40" height="30" fill="brown" />
</svg>`
    }]
  });
  detailScreens.push({
    title: "Gingerbread figure",
    description: `<p>Since our SVG is living inside an HTML file now, we can assign CSS classes to each tag and move some attributes to CSS. You can only move the presentation attributes though. Position attributes and attributes that define the shape still have to stay in HTML. But colors, stroke, and font attributes can be moved to CSS.</p>

<p>We already saw the fill and some of the stroke properties, but here’s another one. The stroke-linecap. This can make our line cap round. Note that the legs and the arms are simple lines here. To give you a comparison if we remove the line cap and set a smaller stroke-width, then this is how it would looks like. But by setting a thick stroke width and a round line cap we can shape legs and arms for our figure.</p>

<p>Also, note the rx property at the rectangle defining the mouth. This will make the edges round. You can think of it as border-radius if you like.</p>`,
    sourceCodes: [{
        type: "HTML",
        content: `<svg class=“gingerbread" width="200" height="200" viewBox="-100 -100 200 200">
  <circle class="body" cx="0" cy="-50" r="30" />

  <circle class="eye" cx="-12" cy="-55" r="3" />
  <circle class="eye" cx="12" cy="-55" r="3" />
  <rect class="mouth" x="-10" y="-40" width="20" height="5" rx="2" />

  <line class="limb" x1="-40" y1="-10" x2="40" y2="-10" />
  <line class="limb" x1="-25" y1="50" x2="0" y2="-15" />
  <line class=“limb" x1="25" y1="50" x2="0" y2="-15" />

  <circle class="button" cx="0" cy="-10" r="5" />
  <circle class="button" cx="0" cy="10" r="5" />
</svg>`
      },
      {
        type: "CSS",
        content: `.gingerbread .body {
  fill: #cd803d;
}

.gingerbread .eye {
  fill: white;
}

.gingerbread .mouth {
  fill: none;
  stroke: white;
  stroke-width: 2p.........完整代码请登录后点击上方下载按钮下载查看