今天在视频中看到一个跳动的小球的效果，感觉挺好玩的。于是自己也实现了一个，感觉还是好玩，就想来分享一番；小伙伴们可以来看一下。这次主要为大家玩一下radial-gradient和动画阴影的调试。

效果呈上

是不是感觉效果挺唯美的，是不是又是一个装的机会；想装那就来仔细看一下我的分析了，绝对对你的理解有所帮助。

代码来了

大家可以先仔细阅读一下完整代码，尤其是radial-gradient和动画阴影的调试。这对大家接下来的阅读具有大大的帮助。

我的解读

主体搭建

我们要先建一个div盒子，再在里面建一个小球和阴影，即可完成主体的搭建

<div class="box">
      <div class="paopao"></div>
      <div class="shawo"></div>
    </div>

相信这对大家来说，就是有手就行。

搭建漂亮的小球

我们今天的主角来了，

 background: radial-gradient(
          circle at 70% 30%,
          #c4cb78 10%,
          #adbf94 60%,
          #ca815a 100%
        );
         border-radius: 50%;

1. radial-gradient这个属性是以一个原点为中心辐射两种或多种颜色，过渡渐进组成。
2. circle at 70% 30%,则是在确定原点位置，所带单位可以是px也可以是百分比。后面的则是一些搭配的颜色。然后就形成了具有成为球一种视觉效果。
3. 最后我们在用圆角 border-radius: 50%;将他做出一个圆，再搭配第一个步骤，就可以形成一个立体的球了。

注意：为了更像一个球，小伙伴们可以加一个 box-shadow，这个阴影的配法大家可以仔细研究一下代码。今天就不讲他了，毕竟前面的文章讲过。

小球的阴影效果

接下来我们再来做一个阴影，让小球更加贴近现实；那该如何实现呢：这就要用到fliter属性和动画了，

 position: absolute;
        left: 70px;
        bottom: -100px;
        width: 150px;
        height: 50px;
        border-radius: 50%;
        background-color: #282826;
        filter: blur(5px);

filter: blur(5px);让他小小的模糊一下，使阴影更加的形象。

还有这里要使用绝对定位，将阴影定在小球下面，所以我们在大盒子里要加一个相对定位

 .box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 200px;
        position: relative;//相对定位
      }

完成到这里了，就基本上完成了。小伙伴们不要急，我们来做最后一步，因为小球会跳动，所以阴影的大小也要变

 @keyframes move1 {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(0.5);
        }
        100% {
          transform: scale(1);
        }

小球跳动

 @keyframes move {
        0% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-90px);
        }
        100% {
          transform: translateY(0);
        }
      }

结束语

对了，小球跳动的时间和阴影放大缩小的时间要一致，不然动画会显得不协调，就没了这一种美感了。最后希望小伙伴们不能只能看着，要操作起来，练习起来。