new logo - Miracle-working

从 Material Design 发现了一个比较中意的图标，想自己再设计下，然后弄个自己的 Logo 出来。

接着就发现了这个 https://www.polymer-project.org/images/logos/p-logo-192.png，确实挺好看的。

想法：

集合物
抱手
三维效果
用 CSS 画出来

想要实现的动画效果：小人 –> 走出来 –> 打坐 –> 手心位置发光

遇到的问题：

基本：https://material.io/icons/#ic_polymer 集合物 + S
css 如何实现？ 先做好基本图像，然后用 box-shadow 做复制。
只能有一个 DIV ，实现不了等边三角形的效果？ 目前只做到了平行四边形的效果。
颜色过度？ 不会颜色搭配，发现加了很难看，所以还是用纯色吧。搭配下来还有3D的感觉，挺不错的。
CSS 生成图片？ 找到了 [html2canvas](https://github.com/niklasvh/html2canvas) 这个东西，但是目前还不支持 skew 属性，所以还是先放放吧

目前的成果：

源码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      #polymer {
        height: 80px;
        width: 120px;
        position: relative;
      }

      #polymer:before,
      #polymer:after {
        content: "";
        margin: 2px 10px;
        position: absolute;
        width: 20%;
        height: 25%;
      }

      #polymer:before {
        top: 38px;
        transform: skew(30deg);
        background-color: #1e88e5;
        box-shadow: 0px 20px #0d47a1, 93px -40px #3f51b5, 93px -20px #2196f3;
      }

      #polymer:after {
        top: 18px;
        transform: skew(-30deg);
        background-color: #2b8fe7;
        box-shadow: 0px -20px #54a4eb, 47px 40px #f1462f, 47px 0px #ff5a43, 47px
            20px #ff6d59, 47px -20px #e8351c, 93px 20px #2b8fe7,
          93px 40px #429be9;
      }
    </style>
  </head>

  <body>
    <h2>Parallelogram CSS</h2>
    <div class="parallelogram">
      <img src="https://www.polymer-project.org/images/logos/p-logo-192.png" />
    </div>
    <br />
    <div id="polymer"></div>
  </body>
</html>

研究的过程中发现 CSS 还可以做很多有意思的东西，比如太极：

/* taiji */
.taiji {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-image: linear-gradient(to right, black 50%, white 50%);
}
.taiji::before,
.taiji::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  left: -50%;
}
.taiji::before {
  background-color: white;
  border: 20px solid black;
  top: 0;
  left: 25%;
}
.taiji::after {
  background-color: black;
  border: 20px solid white;
  bottom: 0;
  left: 25%;
}

.taiji {
  animation: rotate 1s linear infinite;
  animation-play-state: paused;
}
.taiji:hover {
  animation-play-state: running;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}