Question

我是学习HTML / CSS。我制作了两个简单的圆圈和一个旋转元素。之后，我决定使用bootstrap来装饰后续元素。但是，只要我包含引导程序的链接，圆圈就会变形并且动画会被破坏。

另外，如果我删除语句overflow：hidden，在重新调整浏览器大小时，滚动条开始表现不正常。如果我允许，我无法在窗口中插入更多内容。

请帮忙！

这是我的代码：

Answer 1

Bootstrap在所有内容上设置box-sizing: border-box;。在微调器中的元素和伪元素上设置box-sizing: content-box;：

* {
  margin: 0;
  padding: 0;
}

.spinner-container *,
.spinner-container :after,
.spinner-container :before {
  box-sizing: content-box;
}

html,
body {
  height: 100%;
  margin: 0%;
}

body {
  background-color: #080808!important;
  overflow: hidden;
}

#spinner,
#spinner:before,
#spinner:after {
  position: absolute;
  top: 50%;
  left: 50%;
  background: none;
  border-radius: 50%;
  border: 5px solid cyan;
}

#spinner {
  height: 386px;
  width: 386px;
  margin: -208px;
  border: 15px solid blue;
  z-index: 1;
  border-top: 15px solid red;
  -webkit-animation: spin 1s ease-in-out infinite;
  -moz-animation: spin 1s ease-in-out infinite;
  -ms-animation: spin 1s ease-in-out infinite;
  -o-animation: spin 1s ease-in-out infinite;
  animation: spin 1s ease-in-out infinite;
}

#spinner:before {
  content: "";
  height: 372px;
  width: 372px;
  margin: -191px;
}

#spinner:after {
  content: "";
  width: 420px;
  height: 420px;
  margin: -215px;
}

#vline,
#hline,
#dline1,
#dline2 {
  height: 420px;
  position: absolute;
  border-left: 1px solid cyan;
  top: 50%;
  left: 50%;
  margin-top: -210px;
}

#hline {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

#dline1 {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

#dline2 {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

@keyframes "spin" {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes "spin" {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-ms-keyframes "spin" {
  0% {
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-o-keyframes "spin" {
  0% {
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="spinner-container">
  <div id="spinner"></div>
  <div id="vline"></div>
  <div id="hline"></div>
  <div id="dline1"></div>
  <div id="dline2"></div>
</div>

编辑：滚动栏显示不稳定，因为您的#spinner在旋转时将body推出。要解决此问题，请将所有内容放入容器中，设置容器的宽度和高度，将其放在中心并在其上设置overflow:hidden;。此外，当显示小于微调时，请注意媒体查询：

* {
  margin: 0;
  padding: 0;
}

.spinner-container *,
.spinner-container :after,
.spinner-container :before {
  box-sizing: content-box;
}

.spinner-container {
    overflow: hidden;
    height: 430px;
    width: 430px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

@media (max-height: 430px) {
  .spinner-container {
    transform: translate(-50%,0);
    top: 0;
  }
}
@media (max-width: 430px) {
  .spinner-container {
    transform: translate(0,-50%);
    left: 0;
  }
}
@media (max-height:430px) and (max-width: 430px) {
  .spinner-container {
    transform: none;
    left: 0;
    top: 0;
  }
}

html,
body {
  height: 100%;
  margin: 0%;
}

body {
  background-color: #080808!important;
}

#spinner,
#spinner:before,
#spinner:after {
  position: absolute;
  top: 50%;
  left: 50%;
  background: none;
  border-radius: 50%;
  border: 5px solid cyan;
}

#spinner {
  height: 386px;
  width: 386px;
  margin: -208px;
  border: 15px solid blue;
  z-index: 1;
  border-top: 15px solid red;
  -webkit-animation: spin 1s ease-in-out infinite;
  -moz-animation: spin 1s ease-in-out infinite;
  -ms-animation: spin 1s ease-in-out infinite;
  -o-animation: spin 1s ease-in-out infinite;
  animation: spin 1s ease-in-out infinite;
}

#spinner:before {
  content: "";
  height: 372px;
  width: 372px;
  margin: -191px;
}

#spinner:after {
  content: "";
  width: 420px;
  height: 420px;
  margin: -215px;
}

#vline,
#hline,
#dline1,
#dline2 {
  height: 420px;
  position: absolute;
  border-left: 1px solid cyan;
  top: 50%;
  left: 50%;
  margin-top: -210px;
}

#hline {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

#dline1 {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

#dline2 {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

@keyframes "spin" {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes "spin" {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-ms-keyframes "spin" {
  0% {
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-o-keyframes "spin" {
  0% {
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="spinner-container">
  <div id="spinner"></div>
  <div id="vline"></div>
  <div id="hline"></div>
  <div id="dline1"></div>
  <div id="dline2"></div>
</div>

包含引导程序后，HTML元素会失真

1 个答案: