调整CSS棒球场的整体大小

v8wbuo2f  于 2023-05-19  发布在  其他
关注(0)|答案(2)|浏览(92)

我试着调整棒球场的大小，但我不能像一块那样做。这可能吗？tks HTML，我必须使用DIV作为调整大小的方式吗？我真的不知道如何一次调整所有东西的大小。一定有办法的
所以代码也是作为一个链接存在的，但我试图调整整个事情的大小。
CodePen Link

代码段：

#field {
  position: absolute;
  top: -110px;
  left: 145px;
  height: 700px;
  width: 700px;
  border-radius: 1% 100% 1% 1%;
  border: 1px solid green;
  background-color: green;
  -webkit-transform: rotate(-45deg);
}

#in-field {
  position: absolute;
  top: 170px;
  left: 265px;
  height: 450px;
  width: 450px;
  border-radius: 1% 50% 1% 1%;
  border: 1px solid: #836539;
  /*#9b7653; */
  background-color: #836539;
  /*#9b7653;*/
  -webkit-transform: rotate(-45deg);
}

#base-lines {
  position: absolute;
  top: -120px;
  left: 155px;
  height: 670px;
  width: 670px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  -webkit-transform: rotate(-45deg);
}

#in-field-grass {
  position: absolute;
  top: 330px;
  left: 359px;
  height: 260px;
  width: 260px;
  border: 2px solid green;
  background-color: green;
  -webkit-transform: rotate(-45deg);
}

.base {
  position: absolute;
  height: 13px;
  width: 13px;
  -webkit-transform: rotate(-45deg);
  border: 1px solid white;
  background-color: white;
  z-index: 1000;
}

#first-base {
  top: 450px;
  left: 706px;
}

#second-base {
  top: 231px;
  left: 484px;
}

#thrid-base {
  top: 450px;
  left: 262px;
}

#home-plate {
  position: absolute;
  height: 7px;
  width: 13px;
  top: 678px;
  left: 485px;
  border: 1px solid white;
  background-color: white;
}

#home-plate:before,
#home-plate:after {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

#home-plate:before {
  border-top-color: white;
  border-width: 8px;
  left: 50%;
  margin-left: -9.5px;
}

.home-plate-pulse {
  /* Copy position attributes from #home-plate.
       Needs to be separate to allow batters boxes to cover edges of home plate */
  position: absolute;
  height: 7px;
  width: 13px;
  top: 678px;
  left: 485px;
}

#pitchers-mound {
  position: absolute;
  top: 420px;
  left: 450px;
  height: 80px;
  width: 80px;
  border-radius: 100% 100% 100% 100%;
  -webkit-transform: rotate(-45deg);
  border: 1px solid #836539;
  background-color: #836539;
}

#pitchers-plate {
  position: absolute;
  top: 458px;
  left: 482px;
  height: 5px;
  width: 16px;
  border: 1px solid white;
  background-color: white;
}

#vertical {
  position: absolute;
  top: 14px;
  left: 491px;
  height: 1115px;
  width: 1px;
  border-left: 1px solid black;
}

.half-circle {
  position: absolute;
  height: 40px;
  width: 40px;
  -webkit-transform: rotate(-45deg);
  border: 1px solid #836539;
  background-color: #836539;
}

#third-circle {
  top: 440px;
  left: 300px;
  border-radius: 1% 1% 100% 1%;
}

#first-circle {
  top: 440px;
  left: 642px;
  border-radius: 100% 1% 1% 1%;
}

#second-circle {
  top: 275px;
  left: 470px;
  border-radius: 1% 1% 1% 100%;
}

.batters-box {
  position: absolute;
  height: 25px;
  width: 15px;
  border: 2px solid white;
  background-color: #836539;
  /*-6px 6px red,
      -6px -6px red,
      6px -6px red;*/
  opacity: 1.0;
  /* Needed so that opacity for pulse doesn't cause issues */
  top: 670px;
}

#batters-box-right {
  box-shadow: 6px 0 #836539;
  /* Cover up the base line */
  left: 461px;
}

#batters-box-left {
  box-shadow: -6px 0 #836539;
  /* Cover up the base line */
  left: 503px;
}

#batting-circle {
  position: absolute;
  top: 634px;
  left: 440px;
  height: 100px;
  width: 100px;
  border-radius: 100% 100% 100% 100%;
  -webkit-transform: rotate(-45deg);
  border: 1px solid #836539;
  background-color: #836539;
}

#first-base-thing {
  top: 430px;
  left: 667px;
  position: absolute;
  height: 170px;
  width: 13px;
  -webkit-transform: rotate(45deg);
  border-right: 2px solid white;
  border-bottom: 2px solid white;
}

.mowed-grass {
  background-color: #ac0;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-image: -ms-linear-gradient(0deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  -webkit-background-size: 250px 250px;
  -moz-background-size: 50px 50px;
  background-size: 200px 200px;
  /* via http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/ */
  background-color: #ac0
}

.action-area {
  position: relative;
  z-index: 2000;
  cursor: pointer;
  width: 100px;
  height: 100px;
  margin: -50px;
}

.pulse {
  z-index: 1000;
  /*background: red;*/
  border: 1px solid #999;
  /*border-color: blue;*/
  border-radius: 100%;
  margin: -8px;
  /* -0.5 * baseWidth - baseBorder */
  width: 27px;
  /*  2 * baseWidth + baseBorder */
  height: 27px;
  -webkit-animation: pulsate 1s ease-out;
  -webkit-animation-iteration-count: infinite;
  animation: pulsate 1s ease-out;
  animation-iteration-count: infinite;
  opacity: 0.0;
}

@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(1.0, 1.0);
    opacity: 0.0;
  }
  50% {
    opacity: 1.0;
  }
  100% {
    -webkit-transform: scale(2.0, 2.0);
    opacity: 0.0;
  }
}

@keyframes pulsate {
  0% {
    -webkit-transform: scale(1.0, 1.0);
    opacity: 0.0;
  }
  50% {
    opacity: 1.0;
  }
  100% {
    -webkit-transform: scale(2.0, 2.0);
    opacity: 0.0;
  }
}
<div id="stadium">
  <div id="field" class="mowed-grass"></div>
  <div id="in-field"></div>
  <div id="in-field-grass" class="mowed-grass"></div>
  <div id="batting-circle"></div>
  <div id="first-base" class="base">
    <div class="pulse"></div>
    <div class="action-area"></div>
  </div>
  <div id="second-base" class="base">
    <div class="pulse"></div>
    <div class="action-area"></div>
  </div>
  <div id="thrid-base" class="base">
    <div class="pulse"></div>
    <div class="action-area"></div>
  </div>
  <div id="home-plate">
    <div class="action-area"></div>
  </div>
  <div class="home-plate-pulse pulse"></div>
  <div id="base-lines"></div>
  <div id="pitchers-mound"></div>
  <div id="pitchers-plate"></div>
  <div id="first-circle" class="half-circle"></div>
  <div id="second-circle" class="half-circle"></div>
  <div id="third-circle" class="half-circle"></div>
  <div id="batters-box-right" class="batters-box"></div>
  <div id="batters-box-left" class="batters-box"></div>
  <div id="first-base-thing"></div>
</div>
css

2条答案

按热度按时间
pb3s4cty

pb3s4cty1#

您可以将以下CSS添加到父容器（在本例中为#stadium）。

#stadium {
    scale: .5;
}

但是，我强烈建议您遵循评论者的建议，将绝对值更改为相对值。

赞(0）分享  回复(0）举报  2023-05-19
bihw5rsg

bihw5rsg2#

您可以使用CSS scale属性。

div#stadium {
    scale: 50%;
    width: 0px;
}

scale属性定义元素在x和y方向上的缩放量。还可以定义元素在z方向上的缩放程度。
语法scale: x-axis y-axis z-axis|initial|inherit;

赞(0）分享  回复(0）举报  2023-05-19
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com