将 CSS 线性渐变转换为 HTML 引导按钮答案

【问题标题】：Turn a CSS Linear Gradient Into An HTML Bootstrap Button将 CSS 线性渐变转换为 HTML 引导按钮
【发布时间】：2021-09-14 14:58:07
【问题描述】：

我有一个纯粹由 CSS 创建的美式足球场。我在Codepen 中有一个沙箱，下面是代码（我正在使用 ReactJS）。

基本上，我想做的是将每个-webkit-linear-gradient 变成一个按钮，单击该按钮后，将在控制台上记录其位置。它们中的每一个都代表一个球场位置（应该有 101 个，因为有 99 个球场位置，另外两个是主客场区域）。下面的示例图。

我能够轻松记录端区，因为它们都是独特的跨度，但我不确定如何使用其他间距位置来执行此操作。这是我的反应代码：

function App() {
  const printEndzone = (isHome) => {
    isHome ? console.log("home endzone") : console.log("away endzone");
  };

  return (
    <div id="football">
      <span className="endzone" title="home endzone" onClick={() => printEndzone(true)}>
      </span>
      <span className="yard" data-yard="10"></span>
      <span className="yard" data-yard="20"></span>
      <span className="yard" data-yard="30"></span>
      <span className="yard" data-yard="40"></span>
      <span className="yard" data-yard="50"></span>
      <span className="yard" data-yard="40"></span>
      <span className="yard" data-yard="30"></span>
      <span className="yard" data-yard="20"></span>
      <span className="yard" data-yard="10"></span>
      <span className="yard"></span>
      <span className="endzone" title="away endzone" onClick={() => printEndzone(false)}>
      </span>
    </div>
  );
}

export default App;

CSS：

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

body {
  background: #d1d2d3;
}

body > div {
  margin: 20px auto;
}

.middle {
  top: 50%;
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  background: #120930;
  display: block;
}
#football {
  width: 70%;
  height: 420px;
  border: 3px solid #fff;
  position: relative;
  box-shadow: 0 0 55px #000;
  margin: auto;
}

#football span {
  border-right: 2px solid #fff;
  width: 8.33%;
  height: 100%;
  display: inline-block;
  position: relative;
}

#football .endzone {
  background: #01a54f;
  width: 8.352%;
}

#football .endzone:last-of-type {
  background: #01652f;
  border-right: none;
}

#football::before,
#football::after {
  content: "";
  display: block;
  width: 3px;
  height: 18.7%;
  background: yellow;
  position: absolute;
  left: 1px;
  top: 41%;
  z-index: 100;
}

#football::after {
  left: auto;
  right: 1px;
}

#football .endzone::before,
#football .endzone::after {
  content: "";
  display: block;
  width: 23px;
  height: 3px;
  background: yellow;
  position: absolute;
  top: 40%;
  left: -25%;
  /*border: 1px solid #000;*/

  border-radius: 2px;
  -webkit-transform: rotate(20deg);
}

#football .endzone::after {
  top: 60%;
  -webkit-transform: rotate(-20deg);
}

#football .endzone:last-of-type::before,
#football .endzone:last-of-type::after {
  left: auto;
  right: -25%;
  -webkit-transform: rotate(-20deg);
}

#football .endzone:last-of-type::after {
  -webkit-transform: rotate(20deg);
}

#football .yard {
  background: -webkit-linear-gradient(
      left,
      transparent 0,
      transparent 48.5%,
      #fff 48.5001%,
      #fff 51.5%,
      transparent 51.5001%
    ),
    -webkit-linear-gradient(left, #01652f 0, #01652f 7%, transparent 7.1%, transparent
          9.5%, #01652f 9.6%, #01652f 17.6%, transparent 17.7%, transparent
          19.2%, #01652f 19.3%, #01652f 27.3%, transparent 27.4%, transparent
          29.9%, #01652f 30%, #01652f 38%, transparent 38.1%, transparent 40.6%, #01652f
          40.7%, #01652f 50%, #01a54f 50.001%, #01a54f 59.6%, transparent 59.7%, transparent
          62.3%, #01a54f 62.4%, #01a54f 70.4%, transparent 70.5%, transparent
          73%, #01a54f 73.1%, #01a54f 81.1%, transparent 81.2%, transparent
          83.7%, #01a54f 83.8%, #01a54f 91.8%, transparent 91.9%, transparent
          94.4%, #01a54f 94.5%),
    -webkit-linear-gradient(
        top,
        #01a54f 0,
        #01a54f 1.25%,
        #fff 1.2501%,
        #fff 4.76%,
        #01a54f 4.7601%,
        #01a54f 35%,
        #fff 35.0001%,
        #fff 38.51%,
        #01a54f 38.52%,
        #01a54f 65%,
        #fff 65.01%,
        #fff 68.51%,
        #01a54f 68.52%,
        #01a54f 95.23%,
        #fff 95.24%,
        #fff 98.74%,
        #01a54f 98.75%
      ) no-repeat 37px 0,
    -webkit-linear-gradient(top, #01652f 0, #01652f 1.25%, #fff 1.2501%, #fff
          4.76%, #01652f 4.7601%, #01652f 35%, #fff 35.0001%, #fff 38.51%, #01652f
          38.52%, #01652f 65%, #fff 65.01%, #fff 68.51%, #01652f 68.52%, #01652f
          95.23%, #fff 95.24%, #fff 98.74%, #01652f 98.75%);
}

#football .yard::before,
#football .yard::after {
  content: attr(data-yard) "\25C2";
  /*width: 20px;*/
  /*height: 20px;*/

  position: absolute;
  top: 55px;
  right: -24.5%;
  display: block;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  z-index: 100;
  -webkit-transform: rotate(180deg);
}

#football .yard::after {
  top: auto;
  bottom: 55px;
  -webkit-transform: rotate(0deg);
}

#football .yard:nth-of-type(6)::before,
#football .yard:nth-of-type(6)::after {
  content: attr(data-yard);
}

#football .yard:nth-of-type(1)::after,
#football .yard:nth-of-type(2)::after,
#football .yard:nth-of-type(3)::after,
#football .yard:nth-of-type(4)::after,
#football .yard:nth-of-type(5)::after,
#football .yard:nth-of-type(7)::before,
#football .yard:nth-of-type(8)::before,
#football .yard:nth-of-type(9)::before,
#football .yard:nth-of-type(10)::before {
  content: "\25C2"attr(data-yard);
}

#football .yard:nth-of-type(1)::before,
#football .yard:nth-of-type(2)::before,
#football .yard:nth-of-type(3)::before,
#football .yard:nth-of-type(4)::before,
#football .yard:nth-of-type(5)::before,
#football .yard:nth-of-type(7)::after,
#football .yard:nth-of-type(8)::after,
#football .yard:nth-of-type(9)::after,
#football .yard:nth-of-type(10)::after {
  content: attr(data-yard) "\25B8";
}

#football .yard:nth-of-type(7)::before,
#football .yard:nth-of-type(7)::after,
#football .yard:nth-of-type(9)::before,
#football .yard:nth-of-type(9)::after,
#football .yard:nth-of-type(8)::before,
#football .yard:nth-of-type(8)::after,
#football .yard:nth-of-type(10)::before,
#football .yard:nth-of-type(10)::after {
  right: -60.5%;
}

#football .yard:nth-of-type(11)::before,
#football .yard:nth-of-type(11)::after {
  content: "";
  width: 743px;
  height: 2px;
  top: 64%;
  background: -webkit-linear-gradient(
    left,
    transparent 0,
    transparent 31px,
    #fff 32px,
    #fff 42px,
    transparent 43px,
    transparent 69px,
    #fff 70px,
    #fff 80px,
    transparent 81px,
    transparent 106px,
    #fff 107px,
    #fff 117px,
    transparent 117px,
    transparent 143px,
    #fff 144px,
    #fff 154px,
    transparent 155px,
    transparent 179px,
    #fff 180px,
    #fff 190px,
    transparent 191px,
    transparent 217px,
    #fff 218px,
    #fff 228px,
    transparent 229px,
    transparent 255px,
    #fff 256px,
    #fff 266px,
    transparent 267px,
    transparent 292px,
    #fff 293px,
    #fff 303px,
    transparent 305px,
    transparent 329px,
    #fff 330px,
    #fff 340px,
    transparent 341px,
    transparent 367px,
    #fff 368px,
    #fff 378px,
    transparent 379px,
    transparent 404px,
    #fff 405px,
    #fff 415px,
    transparent 416px,
    transparent 442px,
    #fff 443px,
    #fff 453px,
    transparent 454px,
    transparent 478px,
    #fff 479px,
    #fff 489px,
    transparent 490px,
    transparent 515px,
    #fff 516px,
    #fff 526px,
    transparent 527px,
    transparent 552px,
    #fff 553px,
    #fff 563px,
    transparent 564px,
    transparent 591px,
    #fff 592px,
    #fff 602px,
    transparent 603px,
    transparent 627px,
    #fff 628px,
    #fff 638px,
    transparent 639px,
    transparent 664px,
    #fff 665px,
    #fff 675px,
    transparent 676px,
    transparent 700px,
    #fff 701px,
    #fff 711px,
    transparent 712px
  );
  right: 0;
}

#football .yard:nth-of-type(11)::before {
  right: 1px;
  top: 38%;
}

#football .endzone:hover {
  opacity: 0.5;
  cursor: pointer;
}

#football #popup {
  display: none;
}
#football .endzone:hover #popup {
  display: block;
}

音高位置示例：

【问题讨论】：

标签： javascript css reactjs bootstrap-4 linear-gradients

【解决方案1】：

您可以使用以下命令从 0 到 10 获取该俯仰位置中的鼠标位置 x,y。从那里，您可以继续更改 onClick 函数以确定当前的控球权和基于其正确俯仰位置的控球权。

import { MouseEvent } from "react";
import "./styles.css";

function App() {
  const printEndzone = (
    event: MouseEvent<HTMLSpanElement>,
    marker: string | number
  ) => {
    const rect = (event.target as HTMLSpanElement).getBoundingClientRect();
    const x =
      ((event.clientX - rect.left) /
        (event.target as HTMLSpanElement).clientWidth) *
      10;
    const y =
      (event.clientY -
        rect.top / (event.target as HTMLSpanElement).clientHeight) *
      10;
    console.log(x, y);
  };

  const markers = ["home", 10, 20, 30, 40, 50, 40, 30, 20, 10, 0, "away"];

  return (
    <div id="football">
      {markers.map((marker, index) => (
        <span
          key={index}
          className={
            marker === "home"
              ? "endzone"
              : marker === "away"
              ? "endzone"
              : "yard"
          }
          onClick={(event) => {
            printEndzone(event, marker);
          }}
          data-yard={marker !== "yard" ? `${marker}` : ""}
        ></span>
      ))}
    </div>
  );
}

export default App;

【讨论】：