CSS3最最好玩的东西——动画！

作者: RossWen | 来源:发表于2016-12-02 01:16 被阅读788次

CSS3最最好玩的东西——动画！
08_dayCSS动画
过度动画
动画知识点
css3过度动画、变形
Day8 动画
2018-08-18
过度动画 3月前端 08Day
动画过度2018-07-13知识点
网页08day

有一个超级好玩，极致简约的小案例，分享一下。

cute.png

源代码如下：
布局

      <body style="background: black;">
        <div class='container'>
          <div class='person'>
            <div class='head'></div>
            <div class='part arm one'></div>
            <div class='part arm two'></div>
            <div class='torso'></div>
            <div class='part leg one'></div>
            <div class='part foot one'></div>
            <div class='part leg two'></div>
            <div class='part foot two'></div>
          </div>
        </div>
      </body>

CSS:


.container {
  height: 300px;
  width: 300px;
  margin:50px;
}
.person {
  position: absolute;
  height: 75px;
  width: 0;
  color: #fff;
  left: 150px;
  top: 159px;
  transform-origin: 50% 50% 0px;
  -webkit-animation: sprint 2s infinite ease-in;
}
.person .head:before {
  content: "";
  position: absolute;
  top: 0px;
  left: -6px;
  height: 2.7px;
  width: 42px;
  border-radius: 20%;
  border: 4px solid white;
  background-color: #fff;
  transform-origin: 50% 100% 0px;
  z-index: 90;
}
.person .head {
  position: absolute;
  top: -30px;
  left: -6px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  border: 4px solid white;
  transform-origin: 50% 100% 0px;
  z-index: 90;
  -webkit-animation: bob 2s infinite alternate;
}
.person .head:after {
  content: "";
  position: absolute;
  top: -12px;
  left: 9px;
  height: 12px;
  width: 15px;
  border-radius: 30%;
  border: 4px solid white;
  background-color: #fff;
  z-index: 90;
}
.person .torso {
  position: absolute;
  height: 60px;
  width: 0;
  border-left: 2px solid white;
  left: 0px;
  top: 15px;
  z-index: 90;
}
.person .part {
  position: absolute;
  left: 0;
  top: 75px;
  z-index: 90;
}
.person .part.arm {
  position: absolute;
  border-left: 3px solid white;
  border-bottom: 3px solid white;
  height: 45px;
  width: 39px;
  top: 15px;
  right: 300px;
  transform-origin: 0% 0% 0px;
  -webkit-animation: pump 1s infinite ease-in-out;
}
.person .part.arm.one {
  transform: rotate3d(0, 0, 1, -90deg);
}
.person .part.arm.two {
  transform: rotate3d(0, 0, 1, -90deg);
  animation-delay: .5s;
}
.person .part.leg {
  height: 57px;
  width: 60px;
  border-right: 3px solid white;
  border-top: 3px solid white;
  -webkit-animation: run 1s infinite ease-in;
  transform-origin: 0% 0% 0px;
}
.person .part.leg.one {
  transform: rotate3d(0, 0, 1, 90deg);
}
.person .part.leg.two {
  transform: rotate3d(0, 0, 1, 80deg);
  animation-delay: .5s;
}
.person .part .foot {
  position: absolute;
  top: 90px;
  left: 0;
  width: 3px;
  height: 3px;
  background-color: #ffffff;
  z-index: 900;
  border: 3px solid red;
}
@keyframes run {
  0% {
    transform: rotate3d(0, 0, 1, -5deg);
  }
  50% {
    transform: rotate3d(0, 0, 1, 150deg);
  }
  100% {
    transform: rotate3d(0, 0, 1, -5deg);
  }
}
@keyframes bob {
  0% {
    transform: rotate3d(0, 0, 1, 5deg);
  }
  25% {
    transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);
  }
  50% {
    transform: rotate3d(0, 0, 1, 5deg);
  }
  75% {
    transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);
  }
  100% {
    transform: rotate3d(0, 0, 1, 20deg) skew(-15deg, 0deg);
  }
}
@keyframes pump {
  0% {
    transform: rotate3d(0, 0, 1, 80deg);
  }
  50% {
    transform: rotate3d(0, 0, 1, -70deg);
  }
  100% {
    transform: rotate3d(0, 0, 1, 80deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate3d(0, 0, 1, -180deg);
  }
  25% {
    transform: rotate3d(0, 0, 1, -100deg);
  }
  75% {
    transform: rotate3d(0, 0, 1, 100deg);
  }
  100% {
    transform: rotate3d(0, 0, 1, 180deg);
  }
}
@keyframes sprint {
  0% {
    transform-origin: 50% 50% 0px;
    transform: translate(-200px, 0px);
  }
  100% {
    transform: translate(0px, 0px);
    transform-origin: 50% 50% 0px;
    transform: translate(1300px, 0px);
  }
}

效果图嘛。。没有！好奇自己去写写看！
ps：源代码不是我写的，我也不知道作者是谁，总之希望这种好玩的东西多多益善。