likes
comments
collection
share

一个简单的css动画

作者站长头像
站长
· 阅读数 29

最简单的动画效果

在某次浏览网页的时候看到了这个效果，感觉挺不错的，于是就动手去实现一波。

一个简单的css动画

动画拆解：

  1. 元素：

    1. 整体是由3 * 3的小正方体组成，并且整体倾斜45°
    2. 正方体只要三个面，另外三个面看不到。
    3. 底部阴影：每个正方体下方都有一个阴影

  2. 运动轨迹： 每个正方体依次向上移动-复位

实现:

看起来非常简单，实现更是简单

  1. 先创建一个正方体,因为这里一个正方体只有三个面，所以我们只要用元素的before和after两个伪元素即可。

    ​
  <html>
    <div class="cube-group">
      <div class="cube"></div>
    </div>
  </html>
  <style>
    .cube-group {
      --size: 50px;
    }
    .cube {
      background-color: #049dbc;
      width: var(--size);
      height: var(--size);
    }
    .cube::before {
      content: '2';
      width: var(--size);
      height: var(--size);
      display: block;
      background-color: #057d95;
    }
    .cube::after {
      content: '3';
      width: var(--size);
      height: var(--size);
      display: block;
      background-color: #056e83;
    }
  </style>

    效果如下：

一个简单的css动画

  1. 此时before元素占据了整个cube，所以cube元素被遮挡了，接下来我们就需要变换before和after的位置，构造出正方体。将正方体铺开，如下图，可以看到有两种方式a、b，分别以中间块为1（cube块），为其添加编号，任选一种作为变换基准。以方式a为例，我们只要将2（before）右移size，然后绕x轴顺时针旋转90deg，然后将3（after）绕x轴逆时针旋转90deg,就可以得到a2的正方体。 同时因为我们要对after和before就行3D变换，所以在cube加上transform-style: preserve-3d;。

一个简单的css动画

<html>
 <div class="cube-group">
   <div class="cube"></div>
 </div>
 </html>
<style>
 .cube-group {
   --size: 50px;
 }
 .cube {
   transform-style: preserve-3d;
   background-color: #049dbc;
   width: var(--size);
   height: var(--size);
 }
 .cube::before {
   content: '2';
   width: var(--size);
   height: var(--size);
   display: block;
   background-color: #057d95;
   transform: translateX(var(--size)) rotateY(90deg);
 }
 .cube::after {
   content: '3';
   width: var(--size);
   height: var(--size);
   display: block;
   background-color: #056e83;
   transform: rotateX(-90deg);
 }
</style>
  1. 到这，一个正方体就完成了，接下来我们用grid布局布置3*3的九个正方体,同时将整体绕x轴顺时针旋转45deg,然后再绕z轴顺时针旋转45deng，得到最终想要的图案。如图从a2绕x轴转45deg得到a3，再绕z轴转45deg。得到最终效果。

一个简单的css动画

 <html>
   <div class="cube-group">
     <div class="cube"></div>
     <div class="cube"></div>
     <div class="cube"></div>
     <div class="cube"></div>
     <div class="cube"></div>
     <div class="cube"></div>
     <div class="cube"></div>
     <div class="cube"></div>
     <div class="cube"></div>
   </div>
 </html>
 <style>
   .cube-group {
     --size: 50px;
     padding: calc(var(--size));
     width: calc(var(--size) * 3);
     height: calc(var(--size) * 3);
     display: grid;
     transform-style: preserve-3d;
     transform: rotateX(45deg) rotateZ(45deg);
     grid-template-columns: var(--size) var(--size) var(--size);
     grid-template-rows: var(--size) var(--size) var(--size);
   }
 </style>
  1. 整体的形好了，接下来就是添加动画效果了，让每个小正方体依次上移，然后复位。注意，此时要沿着z轴上移，可参照前面所提到a3坐标。然后给每个cube添加box-shadow,就可以得到最终的效果。

完整代码如下：

<html>
 <div class="cube-group">
   <div class="cube" style="--i: 1"></div>
   <div class="cube" style="--i: 2"></div>
   <div class="cube" style="--i: 3"></div>
   <div class="cube" style="--i: 4"></div>
   <div class="cube" style="--i: 5"></div>
   <div class="cube" style="--i: 6"></div>
   <div class="cube" style="--i: 7"></div>
   <div class="cube" style="--i: 8"></div>
   <div class="cube" style="--i: 9"></div>
 </div>
</html>
<style>
 @keyframes up-down {
   50% {
     transform: translateZ(calc(var(--size)));
   }
 }
 .cube-group {
   --size: 50px;
   padding: calc(var(--size));
   width: calc(var(--size) * 3);
   height: calc(var(--size) * 3);
   display: grid;
   transform-style: preserve-3d;
   transform: rotateX(45deg) rotateZ(45deg);
   grid-template-columns: var(--size) var(--size) var(--size);
   grid-template-rows: var(--size) var(--size) var(--size);
​
 }
 .cube {
   transform-style: preserve-3d;
   background-color: #049dbc;
   width: var(--size);
   height: var(--size);
   animation: up-down 1s infinite calc(var(--i) / 3 * -0.2s);
   box-shadow:  calc(var(--size) * 3) calc(var(--size) * 3) calc(var(--size) /2) rgba(145, 143, 143, 0.497)
 }
 .cube::before {
   transform-origin: left top;
   content: '2';
   width: var(--size);
   height: var(--size);
   display: block;
   background-color: #057d95;
   transform: translateX(var(--size)) rotateY(90deg);
 }
 .cube::after {
   transform-origin: 0 0;
   content: '3';
   width: var(--size);
   height: var(--size);
   display: block;
   background-color: #056e83;
   transform: rotateX(-90deg);
 }
</style>
​

最后，这个动画很简单，大家应该都会，但是平常看到有意思的东西，就喜欢自己实现一下，所以就写了这个。接下来工作排期安排下来就不能水了，可能又要开始加班，还好之前打算学的node已经看完教学视频了。

转载自:https://juejin.cn/post/7392071348473675817
评论
请登录