Svg煎饼翻转

下载代码

html

css

分享到微信朋友圈

html

</div><svg
   class='pan'
   preserveAspectRatio='xMinYMin'
   viewBox="0 0 200 325">
  <g
     transform="translate(-179.87888,-433.19762)"
     style="opacity:1"
     id="layer1">
    <g
       transform="translate(0.47635,0.39756772)"
       id="g4336">
      <g
         id="g4303">
        <path
           id="rect4296"
           transform="translate(179.40253,558.67396)"
           d="m 100,-126.27148 c -9.695,0 -17.5,8.40675 -17.5,18.8496 l 0,85.722661 c 0,10.442858 7.805,18.8496096 17.5,18.8496096 9.695,0 17.5,-8.4067516 17.5,-18.8496096 l 0,-85.722661 c 0,-10.44285 -7.805,-18.8496 -17.5,-18.8496 z m 0,6.50781 a 10,10 0 0 1 10,10 10,10 0 0 1 -10,9.999998 10,10 0 0 1 -10,-9.999998 10,10 0 0 1 10,-10 z"
           style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:3.42972708;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
        <rect
           y="534.65881"
           x="261.90253"
           height="47.743256"
           width="34.999996"
           id="rect4298"
           style="opacity:1;fill:#cccccc;fill-opacity:1;stroke:none;stroke-width:4;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
      </g>
      <g
         id="g4272"
         transform="translate(-8.7763963e-6,0)">
        <circle
           r="97.523636"
           cy="658.67395"
           cx="279.40253"
           id="path4136"
           style="fill:#333333;fill-opacity:1;stroke:#e8ecf1;stroke-width:3.99999952;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
        <circle
           r="75"
           cy="658.67395"
           cx="279.40253"
           id="path4138"
           style="fill:#1a1a1a;fill-opacity:1;stroke:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
        <circle
           r="14.999998"
           cy="658.67395"
           cx="279.40253"
           id="path4228"
           style="opacity:1;fill:#800000;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
      </g>
    </g>
  </g>
</svg>

css

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
body {
  background: #db0a5b;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  cursor: pointer;
}
.pan {
  cursor: pointer;
  width: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform-origin: 100px 225px;
          transform-origin: 100px 225px;
  margin-left: -100px;
  margin-top: -225px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.pancake {
  height: 100%;
  width: 100%;
  -webkit-transform: rotate(-45deg) translate3d(0, 0, 5px);
          transform: rotate(-45deg) translate3d(0, 0, 5px);
}
.pancake--cooking .pancake__face--smiling {
  display: none;
}
.pancake--cooking .pancake__face--cooking {
  display: block;
}
.pancake--flipping .pancake__face--smiling,
.pancake--flipping .pancake__face--cooking {
  display: none;
}
.pancake--flipping .pancake__face--flipping {
  display: block;
}
.pancake__wrapper {
  height: 120px;
  width: 120px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  margin-left: -60px;
  margin-top: -60px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.pancake__wrapper:before {
  content: '';
  box-sizing: border-box;
  background: #fff2a4;
  position: absolute;
  border: 5px solid #fff2a4;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotateX(180deg);
          transform: translate(-50%, -50%) rotateX(180deg);
  height: 100%;
  width: 100%;
  border-radius: 100%;
  -webkit-animation: cook 60s forwards ease;
          animation: cook 60s forwards ease;
}
.pancake__head {
  fill: #fff2a4;
}
.pancake__splodge {
  -webkit-animation: cook 60s forwards ease;
          animation: cook 60s forwards ease;
  fill: #fff2a4;
}
.pancake__face {
  display: none;
}
.pancake__face--smiling {
  display: block;
}
@-webkit-keyframes cook {
  0% {
    background: #fff2a4;
    fill: #fff2a4;
  }
  50% {
    background: #eca24d;
    fill: #eca24d;
  }
  100% {
    background: #b45326;
    fill: #b45326;
  }
}
@keyframes cook {
  0% {
    background: #fff2a4;
    fill: #fff2a4;
  }
  50% {
    background: #eca24d;
    fill: #eca24d;
  }
  100% {
    background: #b45326;
    fill: #b45326;
  }
}

JavaScript

var _window = window,TimelineMax = _window.TimelineMax;
var $pan = document.querySelector('.pan');
var $wrap = document.querySelector('.pancake__wrapper');
var $cake = document.querySelector('.pancake');

var timeout = void 0;
var flipping = void 0;
var rotation = 0;
// A little function for toggling the pancake face
var cook = function cook() {
  timeout = setTimeout(function () {
    var op = 'add';
    if ($cake.classList.contains('pancake--cooking')) op = 'remove';
    $cake.classList[op]('pancake--cooking');
    cook();
  }, Math.random() * 4000);
};

var DRAW = 0.2;
var START = 0.1;
var FLIP = 0.5;
var SET = 0.1;

var cakeFlip = function cakeFlip() {
  var timeline = new TimelineMax({
    onComplete: function onComplete() {return rotation = rotation + 360;} });

timeline.
  to($wrap, DRAW, { x: 10, y: -10, rotationX: rotation - 15 }).
  to($wrap, START, { x: -10, y: 10, rotationX: rotation + 20, z: 255 }).
  to($wrap, FLIP, {
    x: -10,
    y: 10,
    z: 500,
    rotationX: rotation + 360,
    onStart: function onStart() {return $cake.classList.add('pancake--flipping');},
    onComplete: function onComplete() {return $cake.classList.remove('pancake--flipping');} }).

to($wrap, SET, { x: 0, y: 0, rotationX: rotation + 360, z: 5 });
  return timeline;
};

flipTl.
  add(getShake($pan, true), 'shake').
  add(getShake($wrap, false), 'shake').
  add(drawBackAndTilt(), 'flip').
  add(cakeFlip(), 'flip');
};
cook();
document.body.addEventListener('click', flip);

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg