javascript - 球页面加载器动画

问题描述

我想知道是否有人知道如何在这种情况下制作一个对象，我的球 div 看起来就像它正在屏幕上一样。如果有意义的话，它就是一种 3D 效果。我的代码附在底部。

var ballMotion = gsap.timeline();

ballMotion
.to(".circle", {duration: 3, transform: 'scale(14)'})

body {
  width: 300px;
  margin: 20px auto;
}

.circle {
  display: block;
  background: black;
  border-radius: 100%;
  height: 300px;
  width: 300px;
  margin: 0;
  background: radial-gradient(circle at 100px 100px, #FE0, #FAFAD2);
}

<figure class="circle"></figure>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js"></script>

标签： javascriptcsscss-animations

我看到你正在使用 gsap.js，我不确定它是如何工作的，但在纯 css 中你可以使用 transform-style: preserve-3d; 以及使用 perspective() 和 translateZ() 以及 @keyframes。我相信凭借 Green Sock 的知识，您可以完成这项工作。见下面的代码：

CSS

    .wrapper--outer {
      display: flex;
      justify-content: center;
      position: relative;
      margin: 0;
      width: 100%;
      height: 100%;
      padding: 1px;
    }

    .snowman {
      display: flex;
      justify-content: center;
      position: absolute;
      top: 18vh;
      height: 200px;
      width: 200px;
    }

    .snowball {
      width: 20px;
      height: 20px;
      border-radius: 10px;
      background-color: blue;
      position: absolute;
      top: 10%;
      left: 50%;
      perspective: 550px;
      transform-style: preserve-3d;
      animation-name: snowball;
      animation-duration: 2s;
      animation-timing-function: ease-out;
      animation-delay: 2s;
      animation-iteration-count: 1;
      animation-direction: normal;
      animation-fill-mode: forwards;
    }

    @keyframes snowball {
      0% {
        transform: perspective(550px) translateZ(200px);
      }
      100% {
        transform: perspective(1000px) translateZ(999px);
      }  
    }

 
<body>
    <div class="wrapper--outer">
      <div class="snowman">
        <div class="snowball"></div>
      </div>
    </div>
</body>

JSBin https://jsbin.com/ropomoquxu/edit?html,css,output

javascript - 球页面加载器动画

问题描述

解决方案

推荐阅读