在Javascript/CSS中实现Icon变形动画？

Question

观看此视频

(高清视频在这里)

我想知道在Javascript/CSS中是否有更简单的方法来实现它.

我知道有一些CSS3属性,如transition,animation,transform等等,但我知道,没有这些属性可以将一个图标到另一个,并提供如上面的视频左上角和右上角的人细腻的效果.

有没有人对可能是一个很好的解决方案实现这一点有什么想法？

Answer 1

是的,我想出了一个类似的外观,表明这种事情只能通过CSS实现.您会注意到一些差异,其中一些可能是我编码的方式,但您明白了.

所以在这里!

注意: Stackoverflow的代码片段不喜欢某些CSS属性,也不会运行它们.这将最好在Codepen上查看.

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700);
 body {
  font-family: 'Lato', sans-serif;
  background: #222;
}
.grid {
  width: 600px;
  height: 600px;
  border: 1px solid;
  margin: 0 auto;
}
.box {
  width: 50%;
  height: 50%;
  float: left;
  position: relative;
}
.box:nth-child(1) {
  background: #01FF70;
}
.box:nth-child(2) {
  background: #FFDC00;
}
.box:nth-child(3) {
  background: #0074D9;
}
.box:nth-child(4) {
  background: #FF4136;
  line-height: 300px;
}
/* Ham Burger */

.hamBurger {
  width: 110px;
  height: 16px;
  background: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  animation: spin 5s infinite;
}
.hamBurger:before,
.hamBurger:after {
  content: "";
  width: 110px;
  height: 16px;
  background: #fff;
  position: absolute;
  left: 0;
}
.hamBurger:before {
  top: -42px;
  animation: translateBefore 5s infinite;
}
.hamBurger:after {
  bottom: -42px;
  animation: translateAfter 5s infinite;
}
@keyframes translateBefore {
  20% {
    transform: rotate(45deg);
    width: 60px;
    left: 52px;
    top: -24px;
  }
  40% {
    transform: rotate(45deg);
    width: 60px;
    left: 52px;
    top: -24px;
  }
  60% {
    transform: rotate(0deg);
    width: 110px;
    left: 0;
    top: -42px;
  }
}
@keyframes translateAfter {
  20% {
    transform: rotate(-45deg);
    width: 60px;
    left: 52px;
    bottom: -24px;
  }
  40% {
    transform: rotate(-45deg);
    width: 60px;
    left: 52px;
    bottom: -24px;
  }
  60% {
    transform: rotate(0deg);
    width: 110px;
    left: 0;
    bottom: -42px;
  }
}
@keyframes spin {
  20% {
    transform: rotate(180deg);
  }
  40% {
    transform: rotate(180deg);
  }
  60% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* End of Ham Burger */

/* Refresh */

.refresh {
  width: 100px;
  height: 100px;
  border: 16px solid transparent;
  border-top-color: #fff;
  border-left-color: #fff;
  border-radius: 50%;
  position: relative;
  transform: rotate(-45deg);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  animation: refreshSpin 1s infinite linear;
}
.refresh:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 30px solid #fff;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  position: absolute;
  top: -16px;
  left: 80%;
  transform: rotate(45deg);
}
@keyframes refreshSpin {
  100% {
    transform: rotate(315deg);
  }
}
/* End of Refresh */

/* Numbers */

.plus,
.num1,
.num2 {
  display: inline-block;
  font-size: 100px;
  color: #fff;
}
.plus {
  animation: plusSpin 5s infinite;
  margin-left: 30%;
}
.num1 {
  position: relative;
  animation: num1Effect 5s infinite;
  padding-left: 20px;
}
.num2 {
  position: absolute;
  top: 0;
  background: #FF4136;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  animation: num2Effect 5s infinite;
}
@keyframes num2Effect {
  30% {
    clip-path: polygon(100% 100%, 100% 0%, 100% 100%, 0% 100%);
  }
  70% {
    clip-path: polygon(100% 100%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes num1Effect {
  30% {
    padding-left: 0px;
  }
  70% {
    padding-left: 0px;
  }
}
@keyframes plusSpin {
  20% {
    transform: rotate(90deg);
  }
  70% {
    transform: rotate(90deg);
  }
  90% {
    transform: rotate(0deg);
  }
}
/* End of Numbers */

/* Icons */

.icons {
  width: 120px;
  height: 120px;
  background: #fff;
  position: absolute;
  top: 27%;
  left: 27%;
  animation: spinIcon 5s infinite;
}
.icons:after {
  content: "";
  display: block;
  height: 100%;
  width: 0px;
  background: #FFDC00;
  margin: 0 auto;
  animation: spinIconMiddle 5s infinite;
}
@keyframes spinIconMiddle {
  33% {
    width: 0;
  }
  66% {
    width: 30px;
  }
  100% {
    width: 0px;
  }
}
@keyframes spinIcon {
  33% {
    transform: rotate(90deg);
  }
  66% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(270deg);
  }
}
/* End of Icons */

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="grid">
  <div class="box">
    <div class="hamBurger"></div>
  </div>
  <div class="box">
    <div class="icons"></div>
  </div>
  <div class="box">
    <div class="refresh"></div>
  </div>
  <div class="box">
    <div class="plus">+</div>
    <div class="num1">
      <div class="num2">2</div>1
    </div>

  </div>
</div>

如果有任何问题请询问.

附加说明:

• 我想不出一个在不使用SVG的情况下在右上角创建三角形的好方法.所以我把那部分遗漏了.
• 这是使用clip-path,这还不是很好的支持.在这里看到更多.
• 添加的脚本是使这个前缀免费.
• 在Chrome中创建,因此最好在Chrome中查看.这远非完美,只是为了证明这可以做到.