今天在视频中看到一个跳动的小球的效果，感觉挺好玩的。于是自己也实现了一个，感觉还是好玩，就想来分享一番；小伙伴们可以来看一下。这次主要为大家玩一下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);}} 

结束语

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

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取