圣诞树动画

Question

Sasha Romanyshyn

Asked:2020-03-25 20:17:22 +0000 UTC2020-03-25 20:17:22 +0000 UTC 2020-03-25 20:17:22 +0000 UTC

6边形布局

772

告诉我，谁知道怎么做？互联网上关于此的信息很少。谢谢）

4 个回答

Voted

Arthur · Answer 1 · 2020-03-25T20:52:08Z

可以使用来创建多边形，将&轴SVG指定为1 到 6。pointsXY

更新 1.0：添加了图标，但有一个警告。标签<i>在中无效SVG，所以我使用了这样的图标：

<text x="0" y="0">&#xf0с1;</text>

然后添加font-family：

svg text {
   font-family: FontAwesome;
}

1.1 更新：添加了图标旋转动画 :)

* {
  margin: 0;
  padding: 0;
  user-select: none;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

svg text {
  font-family: FontAwesome;
  font-size: 1.5rem;
  fill: #ffffff;
  pointer-events: none;
  transition: all .4s;
}

.hex {
  fill: #FC635E;
  stroke: #FE8682;
  stroke-width: 2px;
  transition: all .4s;
}

.hex:hover {
  fill: #fff;
  stroke: #FC635E;
}

.hex:hover+g text {
  fill: #FC635E;
  transform: rotate(360deg) scale(0.9);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="wrapper">
  <div class="item">
    <svg width="160" height="160">
      <polygon class="hex" id="h1" points="25,22 37,29 37,44 25,51 12,44 12,29" transform="scale(3)"/>
      <g transform="translate(62, 118)">
        <text>&#xf0c1;</text>	
      </g>
    </svg>
  </div>
  <div class="item">
    <svg width="160" height="160">
      <polygon class="hex" id="h2" points="25,22 37,29 37,44 25,51 12,44 12,29" transform="scale(3)"/>
      <g transform="translate(62, 118)">
        <text>&#xf0c4;</text>
      </g>
    </svg>
  </div>
  <div class="item">
    <svg width="160" height="160">
      <polygon class="hex" id="h3" points="25,22 37,29 37,44 25,51 12,44 12,29" transform="scale(3)"/>
      <g transform="translate(62, 118)">
        <text>&#xf0c5;</text>	
      </g>
    </svg>
  </div>
</div>

更新 1.2：添加HTML+解决方案CSS：

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

i {
  position: absolute;
  left: 50%;
  top: 50%;
  color: white;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.hexagon,
.hexagon::before,
.hexagon::after,
.fill,
.fill::before,
.fill::after,
i {
  transition: 0.3s;
}

.hexagon,
.hexagon::before,
.hexagon::after {
  background-color: #FE8682;
}

.fill,
.fill::before,
.fill::after {
  background-color: #FC635E;
}

.hexagon::before,
.hexagon::after {
  transform: translateX(-50%) scaleY(0.7) rotate(45deg);
}

.hexagon {
  position: relative;
  margin: 3rem;
  width: 7.7rem;
  height: 4rem;
  font-size: 2rem;
}

.hexagon::before,
.hexagon::after {
  content: "";
  position: absolute;
  width: 5.4rem;
  height: 5.4rem;
}

.hexagon::before {
  top: -2.7rem;
  left: 50%;
}

.hexagon::after {
  bottom: -2.7rem;
  left: 50%;
}

.hexagon:hover {
  background-color: #FC635E
}

.hexagon:hover i {
  color: #FC635E;
}

.hexagon:hover::after {
  background-color: #FC635E
}

.hexagon:hover::before {
  background-color: #FC635E
}

.hexagon:hover .fill {
  background-color: white;
}

.hexagon:hover .fill::after {
  background-color: white;
}

.hexagon:hover .fill::before {
  background-color: white;
}

.fill {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7rem;
  height: 3.5rem;
  z-index: 1;
  transform: translate(-50%, -50%);
}

.fill::before,
.fill::after {
  content: "";
  position: absolute;
  width: 5rem;
  height: 5rem;
  transform: scaleY(0.7) rotate(45deg);
}

.fill::before {
  top: -2.5rem;
  left: 1rem;
}

.fill::after {
  bottom: -2.5rem;
  left: 1rem;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="hexagon">
  <div class="fill"></div>
  <i class="fa fa-desktop"></i>
</div>
<div class="hexagon">
  <div class="fill"></div>
  <i class="fa fa-stack-overflow"></i>
</div>
<div class="hexagon">
  <div class="fill"></div>
  <i class="fa fa-codepen"></i>
</div>

Heidel · Answer 2 · 2020-03-26T21:03:57Z

有一个六边形生成器 - http://csshexagon.com/

对于它生成的代码，您需要添加

*, *:before, *:after {
    -moz-box-sizing: border-box;
     box-sizing: border-box;
}

否则伪元素会离开。

基于生成器代码的示例：

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.hexagon {
  position: relative;
  width: 300px;
  height: 173.21px;
  background-color: #e947bc;
  margin: 86.60px 0;
  border-left: solid 10px #640222;
  border-right: solid 10px #640222;
  transition: background-color 500ms;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 212.13px;
  height: 212.13px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: #e947bc;
  left: 33.9340px;
  transition: background-color 500ms;
}

.hexagon:before {
  top: -106.0660px;
  border-top: solid 14.1421px #640222;
  border-right: solid 14.1421px #640222;
}

.hexagon:after {
  bottom: -106.0660px;
  border-bottom: solid 14.1421px #640222;
  border-left: solid 14.1421px #640222;
}

.hexagon:hover,
.hexagon:hover:before,
.hexagon:hover:after {
  background-color: #fff;
}

.icon {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  background-color: #000;
  z-index: 10;
}

<div class="hexagon">
  <div class="icon"></div>
</div>

小提琴https://jsfiddle.net/mz2jmsdx/21/

六边形内的图标有条件地显示为黑色方块，您可以用任何东西填充它并为其设置任何大小。

Дмитрий Полянин · Answer 3 · 2020-03-28T22:35:48Z

曲线生成器。

该脚本不仅生成六边形，还生成具有任意数量顶点的多面体。有很多具有等边的选项，所以在这个例子中，我们将稍微调整等边以使形状更加个性化。

在这个例子中，我们制作了 4、5、6 和 7 个正方形。

var svgNS = "http://www.w3.org/2000/svg";

var points;
for (var i = 0; i <= 3; i++) {
  points = MakeIdealMnogogrannik(30, 4 + i);
  for (var j = 1; j <= 3; j++) {
    document.getElementById(`svg${i}${j}g`).appendChild(MakeRandomMnogogrannik(7));
  }
}

function MakeIdealMnogogrannik(rad, n) {
  var angle = 2 * Math.PI / n;

  var points = [];

  for (var i = 0; i < n; i++) {
    points.push({
      x: rad * Math.sin(angle * i),
      y: -rad * Math.cos(angle * i)
    });
  }

  return points;
}

function MakeRandomMnogogrannik(distance) {

  var path = document.createElementNS(svgNS, "path");
  var points1 = new Array(points.length);

  for (var i = 0; i < points.length; i++) {
    points1[i] = {
      x: points[i].x + randomMax(distance),
      y: points[i].y + randomMax(distance)
    }
  }

  var d = `M ${points1[0].x} ${points1[0].y}`;
  for (var i = 1; i < points.length; i++) {
    d += ` L ${points1[i].x} ${points1[i].y}`;
  }
  d += " Z";


  // path.classList.add("hex");

  var rot = randomMax(360);


  path.setAttribute("d", d);



  return path;
}

function randomMax(max) {
  return Math.floor(Math.random() * (max + 1));
}

body {
  display: flex;
  flex-direction: column;
}

.line {
  display: flex;
  justify-content: space-around;
}

.hex {
  fill: #FC635E;
  stroke: #FE8682;
  stroke-width: 2px;
  transition: all .4s;
}

.hex:hover {
  fill: #fff;
  stroke: #FC635E;
}

svg text {
  font-family: FontAwesome;
  font-size: 1.35rem;
  fill: #ffffff;
  pointer-events: none;
  transition: all .4s;
}

.hex:hover+g text {
  fill: #FC635E;
  color: red;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<div class="line">
  <div class="item">
    <svg id="svg01" width="100" height="100" viewBox="-41 -41 82 82">
      <g id="svg01g"  class="hex"></g>
      <g transform="translate(-7, 10)">
        <text>&#xf0c1;</text>	
      </g>
    </svg>
  </div>
  <div class="item">
    <svg id="svg02" width="100" height="100" viewBox="-41 -41 82 82">
  <g id="svg02g" class="hex"></g>
       <g transform="translate(-7, 10)">
        <text>&#xf0c4;</text>
      </g>
    </svg>
  </div>
  <div class="item">
    <svg id="svg03" width="100" height="100" viewBox="-41 -41 82 82">
     <g id="svg03g"  class="hex"></g>
       <g transform="translate(-7, 10)">
        <text>&#xf0c5;</text>	
      </g>
    </svg>
  </div>
</div>
<div class="line">
  <div class="item">
    <svg id="svg11" width="100" height="100" viewBox="-41 -41 82 82">
      <g id="svg11g"  class="hex"></g>
      <g transform="translate(-7, 10)">
        <text>&#xf0c1;</text>	
      </g>
    </svg>
  </div>
  <div class="item">
    <svg id="svg12" width="100" height="100" viewBox="-41 -41 82 82">
  <g id="svg12g" class="hex"></g>
       <g transform="translate(-7, 10)">
        <text>&#xf0c4;</text>
      </g>
    </svg>
  </div>
  <div class="item">
    <svg id="svg13" width="100" height="100" viewBox="-41 -41 82 82">
     <g id="svg13g"  class="hex"></g>
       <g transform="translate(-7, 10)">
        <text>&#xf0c5;</text>	
      </g>
    </svg>
  </div>
</div>
<div class="line">
  <div class="item">
    <svg id="svg21" width="100" height="100" viewBox="-41 -41 82 82">
      <g id="svg21g"  class="hex"></g>
      <g transform="translate(-7, 10)">
        <text>&#xf0c1;</text>	
      </g>
    </svg>
  </div>
  <div class="item">
    <svg id="svg22" width="100" height="100" viewBox="-41 -41 82 82">
  <g id="svg22g" class="hex"></g>
       <g transform="translate(-7, 10)">
        <text>&#xf0c4;</text>
      </g>
    </svg>
  </div>
  <div class="item">
    <svg id="svg23" width="100" height="100" viewBox="-41 -41 82 82">
     <g id="svg23g"  class="hex"></g>
       <g transform="translate(-7, 10)">
        <text>&#xf0c5;</text>	
      </g>
    </svg>
  </div>
</div>
<div class="line">
  <div class="item">
    <svg id="svg31" width="100" height="100" viewBox="-41 -41 82 82">
      <g id="svg31g"  class="hex"></g>
      <g transform="translate(-7, 10)">
        <text>&#xf0c1;</text>	
      </g>
    </svg>
  </div>
  <div class="item">
    <svg id="svg32" width="100" height="100" viewBox="-41 -41 82 82">
  <g id="svg32g" class="hex"></g>
       <g transform="translate(-7, 10)">
        <text>&#xf0c4;</text>
      </g>
    </svg>
  </div>
  <div class="item">
    <svg id="svg33" width="100" height="100" viewBox="-41 -41 82 82">
     <g id="svg33g"  class="hex"></g>
       <g transform="translate(-7, 10)">
        <text>&#xf0c5;</text>	
      </g>
    </svg>
  </div>
</div>

样式和一些标记取自 St1myL 的答案。

user33274 · Answer 4 · 2020-03-26T00:28:18Z

user33274

2020-03-26T00:28:18Z2020-03-26T00:28:18Z

SVG很好，但是如果你可以避免使用其他技术，那么我尽量不使用html和css以外的任何东西......我希望我的回答有助于理解

* {
  margin: 0;
  padding: 0;
}

.item {
  width: 150px;
  height: 60px;
  background: red;
  margin: 100px auto;
  position: relative;
}

.item:after {
  content: "";
  display: block;
  width: 150px;
  height: 60px;
  background: red;
  position: ;
  transform: rotate(45deg);
}

.item:before {
  content: "";
  display: block;
  width: 150px;
  height: 60px;
  background: red;
  position: ;
  transform: rotate(-45deg);
  position: absolute;
}

.outer {
  width: 65px;
  height: 147px;
  background: red;
  position: absolute;
  left: 28%;
  top: -71%;
  margin-left: -0%;
  border-radius: 4px;
  z-index: 100;
  line-height: 140px;
  text-align: center;
}

<div class="item">
  <div class="outer">
    иконка
  </div>
</div>

4

6边形布局

是否可以在 C++ 中继承类 <---> 结构？

这种神经网络架构适合文本分类吗？

为什么分配的工作方式不同？

控制台中的光标坐标

如何在 C++ 中删除类的实例？

点是否属于线段的问题

json结构错误

ServiceWorker 中的“获取”事件

c ++控制台应用程序exe文件[重复]

按多列从sql表中选择

6边形布局

4 个回答

相关问题