Question

我正在尝试使用css mix-blend-mode属性来制作具有差异的div的叠加，从而制作国际象棋模式。但我的问题是如何优雅地集中所有内容。

这是我的代码：

＆＃13;

var n = 20;
var s = 300;

for (var x = 1; x < n; x++) {
  $("div").last().append("<div/>");
}

$("div").css({"transform": "rotate(" +  (360 / n) + "deg) translate(-30%, -30%)",
              "width": s,
              "height": s});

＆＃13;

body {
  background-color: black;
  overflow: hidden;
}

div {
  mix-blend-mode: difference;
  background-color: white;
  position: absolute;
  top: 30%;
  left: 30%;
  border-radius: 50%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

＆＃13;

关于如何完美地集中所有内容的任何想法？

编辑：我希望国际象棋甜甜圈的洞位于页面的中心。

Answer 1

不确定这100％是否适用于您的情况，但是如果您可以将这些div放在以相对于页面的绝对定位为中心的容器中，那么您可以非常轻松地将甜甜圈孔居中。如果s和translate值不变，则可能是这样的：

HTML：

<section>
<div></div>
</section>

CSS：

section {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px; /* half of s */
  margin-left: -100px; /* half of s */
}

div {
  mix-blend-mode: difference;
  background-color: white;
  position: absolute;
  left: 30%; /* same as translate value */
  top: 30%; /* same as translate value */
  border-radius: 50%;
}

Fiddle

否则你必须用JS设置它们，如下：

var n = 20;
var s = 200;
var t = "30%";
for (var x = 1; x < n; x++) {
  $("div").last().append("<div></div>");
}

$("div").css({"transform": "rotate(" +  (360 / n) +  "deg) translate(-" + t + ", -" + t + ")",
              "width": s,
              "height": s, 
              "left": t,
              "top": t});
$("section").css({"margin-left": s / -2 + "px",
                  "margin-top": s / -2 + "px"})

Fiddle

如何使用CSS3旋转中心嵌套的div？

1 个答案: